js moves any element to a specified position-JS Tutorial-php.cn

js moves any element to a specified position

不言

Release： 2018-07-09 17:17:41

Original

6522 people have browsed it

This article mainly introduces how to move any element to a specified position with js. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Idea: Move an element to Specifying the location ====== requires passing in 2 parameters. One is the element to be moved, and the other is the specified position target.

Get the current position of the element, set a distance step for each movement, set a timer, and reach the target position through multiple circular movements. Determine whether a loop needs to be executed based on the distance between the current position and the target position

Take this article as an example. There are several pitfalls here:

1. To move an element, it needs to be separated from the document flow. That is, absolute positioning needs to be used in the css style

2. Every time a click is triggered, a timer is generated. When the button is clicked continuously, the element moves faster

===》Solution: Set only one timer, and clean the timer before executing the timer to prevent the last operation from leaving any impact.

Only setting a timer can be based on the properties of the object. There is only one property clicked on the object. That is, element.timer1=setInterval();

3. To get the current position of the element, you need to use offsetLeft / offsetTop / offsetWidth / offsetHeight. The result is of type number, without 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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the implementation of JS effect function

How to randomly sort js arrays

The above is the detailed content of js moves any element to a specified position. For more information, please follow other related articles on the PHP Chinese website!