0x00 scroll
scroll与client十分相似，都是返回值不带边框且不带单位，与client不同的一点就是，当元素超出盒子之后，client返回的值仍是盒子的大小，scroll返回的大小则是加上了超出盒子元素的大小。
0x01 offset client scroll三大系列的对比总结
offset系列主要用于获取元素位置offsetLeft offsetTop；
另外需要注意的是以上两个方法兼容性差，只兼容ie9及以上的浏览器。offsetWidth和offsetHeight则兼容性更好，全线兼容
client系列主要用于获取元素大小clientWidth，clientHeight，兼容性较好，唯一要注意的是ie6有点问题
scroll系列主要用于获取滚动距离scrollTop scrollLeft，
0x02 mouseenter与mouseover事件对比
这两个事件都是鼠标经过时触发；
但是mouseenter事件没有冒泡事件，不会触发父元素的事件，所以只有经过盒子本身才触发
而mouseover事件经过子元素也会触发。
0x03 一个简单的缓动动画效果
算法为（目标值-当前移动的距离）/10做本次移动的距离
<body> <div class="father"> </div> <script> function animate(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function (){ let step = target - obj.offsetLeft; if(step >= 0){ step = Math.ceil((target - obj.offsetLeft) / 10); }else { step = Math.floor((target - obj.offsetLeft) / 10); } if(obj.offsetLeft == target){ clearInterval(obj.timer); }else{ obj.style.left = obj.offsetLeft + step + 'px'; console.log(obj.style.left); } }, 30) } </script> </body>0x04 轮播图的无缝滚动
原理是复制一份第一张图片，当轮播图播放完最后一张图片时，然后播放到这张复制的图片，再点击下一张时，
ps：页面的滚动用winodw.scroll(0,0);如果需要播放滚动动画则用上面的动画实现。
0x05 筋斗云效果实现
<body> <div class="box"> <span class="aqua"></span> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script src="js/annimate.js"></script> <script> function animate(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function (){ let step = target - obj.offsetLeft; if(step >= 0){ step = Math.ceil((target - obj.offsetLeft) / 10); }else { step = Math.floor((target - obj.offsetLeft) / 10); } if(obj.offsetLeft == target){ clearInterval(obj.timer); }else{ obj.style.left = obj.offsetLeft + step + 'px'; console.log(obj.style.left); } }, 30) } window.addEventListener('load',function (){ let aqua = document.querySelector('.aqua'); let box = document.querySelector('.box'); let li = box.querySelectorAll('li'); let position = 0; for(let i = 0;i < 6;i++){ li[i].addEventListener('mouseenter',function (){ animate(aqua,this.offsetLeft); }) li[i].addEventListener('mouseleave',function (){ animate(aqua,position); }) li[i].addEventListener('click',function (){ position = this.offsetLeft; }) } }) </script> </body>0x06 移动端touch
touchstart事件表示刚触碰；
touchmove事件表示触碰时移动；
touchend事件表示结束触碰；
0x07 移动端click事件延迟300ms解决方案
方案1：在视口标签中加入user-scalable=no，禁用用户缩放。
方案2：
0x08 本地储存
window.sessionStorage以浏览器关闭作为生命周期；在同一个窗口下数据可以共享；以键值对的形式存储使用
sessionStorage有三个常用方法，setItem(key,value)用来存储数据；getItem(key)用来获取数据；removeItem(key)用来删除数据
window.localStorage生命周期为永久，并且同一浏览器下的不同窗口可以共享；以键值对的形式存储使用。
方法同上
