利用定时器实现的移动效果:
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>