suchen

Heim  >  Artikel  >  Web-Frontend  >  js verschiebt jedes Element an eine angegebene Position

js verschiebt jedes Element an eine angegebene Position

不言
不言Original
2018-07-09 17:17:416596Durchsuche

Dieser Artikel stellt hauptsächlich vor, wie man ein Element mit js an eine bestimmte Position verschiebt. Er hat einen bestimmten Referenzwert. Jetzt können Freunde in Not darauf verweisen.

Idee: Verschieben Sie ein Element Zur Angabe des Standorts ====== ist die Übergabe von 2 Parametern erforderlich. Eines ist das zu verschiebende Element und das andere ist das angegebene Positionsziel.

Ermitteln Sie die aktuelle Position des Elements, legen Sie einen Entfernungsschritt für jede Bewegung fest, stellen Sie einen Timer ein und erreichen Sie die Zielposition durch mehrere kreisförmige Bewegungen. Bestimmen Sie anhand des Abstands zwischen der aktuellen Position und der Zielposition, ob eine Schleife ausgeführt werden muss

Am Beispiel dieses Artikels gibt es hier mehrere Fallstricke:

1. Um ein Element zu verschieben, muss es vom Dokumentfluss getrennt werden. Das heißt, die absolute Positionierung muss im CSS-Stil verwendet werden.

2. Jedes Mal, wenn ein Klick ausgelöst wird, a Wenn die Schaltfläche kontinuierlich angeklickt wird, bewegt sich das Element schneller

===》Lösung: Stellen Sie nur einen Timer ein und reinigen Sie den Timer, bevor Sie den Timer ausführen, um den letzten zu verhindern dass der Betrieb Stöße hinterlässt.

Das Einstellen eines Timers kann nur auf den Eigenschaften des Objekts basieren. Es gibt nur eine Eigenschaft, auf die auf das Objekt geklickt wird. Das heißt, element.timer1=setInterval();

3 Um die aktuelle Position des Elements zu erhalten, müssen Sie offsetLeft / offsetTop / offsetWidth / offsetHeight verwenden Typnummer, ohne 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>

Das Obige ist der gesamte Inhalt dieses Artikels, der für das weitere Studium hilfreich ist Inhalt, achten Sie bitte auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Über die Implementierung der JS-Effektfunktion

Methode der zufälligen Sortierung des JS-Arrays

Das obige ist der detaillierte Inhalt vonjs verschiebt jedes Element an eine angegebene Position. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css 循环 JS number 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Informationen zur Implementierung der JS-EffektfunktionNächster Artikel：Informationen zur Implementierung der JS-Effektfunktion

In Verbindung stehende Artikel

Mehr sehen