欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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效果功能的实现

js数组随机排序的方法

以上就是js将任意元素移动到指定位置的详细内容,更多请关注其它相关文章!

相关标签: 任意元素