2017年6月19日
CSS3滚动条美化,CSS3滚动条皮肤
摘要： CSS3 -webkit-scrollbar滚动条皮肤美化实现，利用-webkit-scrollbar，-webkit-scrollbar-track，-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。 下面是5个滚动条样式。 css代码 阅读全文
posted @ 2017-06-19 15:38 ysx_小鱼 阅读(330) 评论(0) 推荐(0)
mouseover事件与mouseenter事件的区别
摘要： mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。 mouseout与mouseleave不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有 阅读全文
posted @ 2017-06-19 14:27 ysx_小鱼 阅读(196) 评论(0) 推荐(0)
2017年6月14日
js中setInterval和setTimeout区别和用法
摘要： setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setTimeout()返回的ID值。 注意: setTimeout() 和 clearTimeout() 阅读全文
posted @ 2017-06-14 19:09 ysx_小鱼 阅读(1350) 评论(0) 推荐(0)
CSS3 Transitions, Transforms和Animation使用简介与应用展示
摘要： 一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似的感觉，本来不打算深究CSS3的一些属性的，但是其效果以及实际应用价值之诱惑实在巨大，还是抵挡不住，折 阅读全文
posted @ 2017-06-14 11:59 ysx_小鱼 阅读(316) 评论(0) 推荐(0)
CSS/CSS3长度、时间、频率、角度单位大全
摘要： 一、一笔带过的前言 CSS中凡是牵扯到数值的基本上都与单位相关联，例如： .test{width:180px;} 平时我们再制作页面的时候用到的单位也就那么几个，而实际上CSS中的可用单位的数量多得惊人，尤其CSS3的出现更壮大了CSS单位家族。而本文就是简单展示下这些值这些单位。 二、CSS长度值 阅读全文
posted @ 2017-06-14 11:22 ysx_小鱼 阅读(602) 评论(0) 推荐(0)
视区相关单位vw, vh..简介以及可实际应用场景
摘要： 一、N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了，参见：CSS长度值及时间、频率、角度单位。显然，其中就提到了本文要感叹的单位vw, vh，见下图： 不过“我看见你”和“我触碰你”是不一样的。正好，机缘巧合，最近又与这两个单位想见。大致琢磨了下，貌似vh这个单位可以实现我以前 阅读全文
posted @ 2017-06-14 11:16 ysx_小鱼 阅读(572) 评论(0) 推荐(0)
2017年6月13日
width:100vh与min-height:calc(100vh + 51px)
摘要： vh:相对于视窗的高度，那么vw:则是相对于视窗的高度。 “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 详细vh的用法，大家可以参考http://www.zhangxinxu 阅读全文
posted @ 2017-06-13 19:04 ysx_小鱼 阅读(1009) 评论(0) 推荐(0)
CSS3实现整屏切换效果
摘要： 页面结构 实现思路与大众方法类似，如图 每个section就是一页内容，它的大小充满了屏幕（红色区域），一个Container由多个section构成，我们通过改变container的位置，来达到页面切换的效果。container向下走，页面好像上移了，container向上走，页面就下移了。 事件 阅读全文
posted @ 2017-06-13 17:19 ysx_小鱼 阅读(714) 评论(0) 推荐(0)
js中鼠标滚轮事件详解
摘要： 附加事件 其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。 /*IE注册事件*/ /*IE注册事件*/ if(document.attachEvent){ if(document.attachEvent){ document.attachEvent('onmo 阅读全文
posted @ 2017-06-13 17:12 ysx_小鱼 阅读(23402) 评论(0) 推荐(1)
深入理解requestAnimationFrame
摘要： 前言 本文主要参考w3c资料，从底层实现原理的角度介绍了requestAnimationFrame、cancelAnimationFrame，给出了相关的示例代码以及我对实现原理的理解和讨论。 本文介绍 浏览器中动画有两种实现形式：通过申明元素实现（如SVG中的元素）和脚本实现。可以通过setTim 阅读全文
posted @ 2017-06-13 14:26 ysx_小鱼 阅读(1143) 评论(0) 推荐(1)