摘要：
1. 移动端常见特效 1.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 1.2. 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 // 1. 获取元素 var focus 阅读全文
摘要：
1触屏事件 1.1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可 阅读全文
摘要：
案例：筋头云案例 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可 鼠标离开某个小li，就把目标值设为 0 如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置 <script> window.addEv 阅读全文
摘要：
.案例：返回顶部 带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少，可以通过 window.pageYOffset 得到 最后是页面滚动，使用 window.scroll(x,y) <script> // 阅读全文
摘要：
1. 案例：网页轮播图 轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放 阅读全文
摘要：
1.动画函数封装 1.1. 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 1 阅读全文
摘要：
1.mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseen 阅读全文
摘要：
1.元素滚动 scroll 系列 1.1. scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.2. 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被 阅读全文
摘要：
1. 元素可视区 client 系列 1.1 client概述 client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2. 淘宝 flexible.js 源码分析 立即执行 阅读全文
摘要：
1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 offset 系列常用属 阅读全文