Home >Web Front-end >JS Tutorial >js moves any element to a specified position

js moves any element to a specified position

不言Original: 2018-07-09 17:17:416602browse

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>

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!

php css 循环 JS number 对象

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：About the implementation of JS effect functionNext article：About the implementation of JS effect function

See more

js moves any element to a specified position

Related articles