JS-动画框架
慕课网教程地址：JS动画效果 速度动画本门教程的基础。实现的是分享按钮的移出。首先要知道一个东西：定时器 HTML DOM setInterval() 方法定义和用法setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。语法setInterval(code,millisec[,"lang"])–W3Cschool 网页中的JS就是不断的执行改变属性的函数，比如距离，透明度来达到动画的效果:timer = setInterval(function (){},30)后面的就是时间啦，每隔多少秒重复执行前面的（匿名）函数。用clearInterval(timer)来结束计时器。最基本的代码：1234567891011121314151617181920212223242526272829window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function () { startMove(0); } oDiv.onmouseout = function () { startMove(-200); }}var timer = null;function startMove (iTarget) { clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function () { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; }else{ speed = 10; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } },30)} 首先是鼠标一入一出的时候执行函数。 当函数的开头没有clearInterval(timer)时，每次移入DIV就会触发一次定时器：timer = setInterval()，旧的定时器还没关闭，新的定时器就开始工作了，就会造成叠加，速度就会不是匀速运动而是越来越快（鼠标放在上面越久） 下面的逻辑就通过对动画的分析能知道应该怎么写。