随笔分类 - javascript
摘要：效果1： 实现原理如下图： 红色框为容器，设置内容溢出隐藏，计算出一屏的宽度，通过定位每次滚动一屏的距离 代码: 效果2： 该效果实现原理为所有内容重叠在一起，通过z-index把需要展示的放在最上一层。 代码： 这种效果可以配上一些css3即可定制自己喜欢的幻灯片动画效果。
阅读全文
摘要：实现效果： JQ简单选项卡实现，实现原理：当点击选项卡栏目时为当前栏目添加一个class，然后通过index()获得其为第几个栏目，然后通过eq()选择对应的内容显示。 布局代码： JQ实现： 最终效果 <!--栏目--> 栏目1 栏目2 <!--内容--> a b 1 2 栏目1 栏目2 栏目1
阅读全文
摘要：在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动，如下： 当滚动时内容位置保持不变，但是内容后面的背景却在随着滚动。随之我通过审查元素看到了其是通过background-position来实现的，实现原理为当目标DIV出现在屏幕上时，当往下滚动时background-posi
阅读全文
摘要：滑动屏幕 touchstart:接触屏幕时触发，touchmove:活动过程触发，touchend:离开屏幕时触发 首先获取手接触屏幕时的坐标X,Y 然后获取滑动的坐标，并使用后面的坐标减去前面的坐标，通过获取的值判断其滑动方向。因为手滑动方向一般不是水平或者垂直的，所以可使用Math.abs()进
阅读全文
摘要：firefox使用DOMMouseScroll,其他浏览器使用mousewheel 首先绑定一个滚动事件 当滚动时获取wheelDelta值，firefox使用detail:值为下滚3上滚-3,其他浏览器使用wheelDelta:值为下滚-120上滚120，通过判断其值为正或者负即可判断鼠标滚轮上滚
阅读全文
摘要：在JQ中可以直接使用animate()来实现动画，在JS中可以通过定时器setInterval()来实现。 html JQ实现方法：
阅读全文
浙公网安备 33010602011771号