js将任意元素移动到指定位置
程序员文章站
2022-06-03 12:17:45
...
这篇文章主要介绍了关于js将任意元素移动到指定位置,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下
思路:将某元素移动到指定位置======需传入2个参数。一个是要移动的元素element,另一个是指定的位置target。
获取元素的当前位置current,设置一个每次移动的距离step,设置定时器,通过多次循环移动,到达目标位置。根据当前位置和目标位置的距离判断是否需要执行循环
以本文为例,这里有几个坑:
1、元素要移动,需要脱离文档流,即css样式中需要使用绝对定位
2、每触发一次点击,就产生一个定时器,当不停地点击按钮时,元素移动的速度不断加快
===》解决:只设置一个定时器,且在执行定时器之前先清理一次定时器,防止上次的操作留下影响。
只设置一个定时器可以根据对象的属性,对象点出来的属性有且只有一个。即element.timer1=setInterval();
3、获取元素的当前位置,需要用offsetLeft / offsetTop / offsetWidth / offsetHeight,得出的结果是number类型,没有px
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 130px; background: red; position: absolute; left: 20px; } </style> </head> <body> <input type="button" value="按钮1" id="btn"/> <input type="button" value="按钮2" id="btn2"/> <div id="dv"> </div> <script> document.getElementById("btn").onclick=function(){ animate(document.getElementById("dv"),400); }; document.getElementById("btn2").onclick=function(){ animate(document.getElementById("dv"),1600); }; //把任意元素移动到指定的目标位置 function animate(element,target){ clearInterval(element.timer1); element.timer1=setInterval(function(){//element是一个对象,对象点出来的属性有且只有一个,避免多次点击按钮产生多个定时器 var current=element.offsetLeft; //获取当前位置,数字类型,没有px。 //不可以用element.style.left,因为该写法只能获取到行内样式,不能获取到<style></style>标签内的样式 var step=10;//每次移动的距离 step=current<target?step:-step;//step的正负表示了向左或是向右移动 current+=step; //计算移动到的位置,数字类型,没有px if(Math.abs(target-current)>Math.abs(step)){//当离目标位置的距离大于一步移动的距离 element.style.left=current+"px";//移动 }else{//当间距小于一步的距离,则清理定时器,把元素直接拿到目标位置 clearInterval(element.timer1); element.style.left=target+"px"; } },20); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
以上就是js将任意元素移动到指定位置的详细内容,更多请关注其它相关文章!
上一篇: html页面取不到php的值解决方法
下一篇: 从MySQL数据库表中取出随机数据的代码