Maison >interface Web >js tutoriel >js déplace n'importe quel élément vers une position spécifiée

js déplace n'importe quel élément vers une position spécifiée

不言original: 2018-07-09 17:17:416600parcourir

Cet article présente principalement js pour déplacer n'importe quel élément vers une position spécifiée. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Idée : déplacer un élément vers la spécification. l'emplacement ====== nécessite de transmettre 2 paramètres. L'un est l'élément à déplacer et l'autre est la position cible spécifiée.

Obtenez la position actuelle de l'élément, définissez un pas de distance pour chaque mouvement, réglez une minuterie et atteignez la position cible grâce à plusieurs mouvements circulaires. Déterminez si une boucle doit être exécutée en fonction de la distance entre la position actuelle et la position cible

En prenant cet article comme exemple, il y a ici plusieurs pièges :

1. Pour déplacer un élément, il doit être séparé du flux du document. C'est-à-dire qu'un positionnement absolu doit être utilisé dans le style CSS

2. Chaque fois qu'un clic est déclenché, un une minuterie est générée. Lorsque le bouton est cliqué en continu, l'élément se déplace plus rapidement

===》Solution : définissez une seule minuterie et nettoyez la minuterie avant d'exécuter la minuterie pour éviter la dernière. opération de laisser tout impact.

Seul le réglage d'une minuterie peut être basé sur les propriétés de l'objet. Il n'y a qu'une seule propriété cliquée sur l'objet. Autrement dit, element.timer1=setInterval();

3. Pour obtenir la position actuelle de l'élément, vous devez utiliser offsetLeft / offsetTop / offsetWidth / offsetHeight. tapez le numéro, sans 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>

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la mise en œuvre de la fonction d'effet JS

Méthode de tri aléatoire du tableau js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css 循环 JS number 对象

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos de l'implémentation de la fonction d'effet JSArticle suivant：À propos de l'implémentation de la fonction d'effet JS

Articles Liés

Voir plus