标签：动画 定时器 obj 效果 timer span div 移动 animate
利用定时器实现的移动效果:
css:
<style> div { position: absolute; width: 100px; height: 200px; ">aqua; }span { height: 100px; width: 150px; display: block; position: absolute; top: 300px; } </style> html:
<body> <button>点我启动变换形态</button> <div></div> <span>变换形态</span> <script> //简单动画函数的封装,一般有两个参数,对象和移动的最终目的地 //给不同的元素指定不同的定时器,将其变为对象.属性 obj.timer 可以避免开辟内存空间 var div = document.querySelector('div') var span = document.querySelector('span') var btn = document.querySelector('button') btn.addEventListener('click', function () { animate(span, 400) }) function animate(obj, target) { //当我们把这个函数调用在一个点击事件中,一直点击的话会加速,而且会超出目标距离,是因为有了太多的定时器 //解决:每次点击时候会生成定时器 , 那先清除定时器,再生成. clearInterval(obj.timer); obj.timer = setInterval(function () { if (obj.offsetLeft > target) { //如果div的左偏移大于500,则停止移动 clearInterval(obj.timer); } else { //如果这个移动语句不在else中,那么到了目标位置点击之后还会继续走! obj.style.left = obj.offsetLeft + 2 + 'px' } }, 30) }
//调用函数 animate(div, 500) </script> </body>
标签：动画,定时器,obj,效果,timer,span,div,移动,animate 来源： https://www.cnblogs.com/hb-iu/p/15796694.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。