Maison > Article > interface Web > Le principe d'implémentation de la gigue en js (avec code)

Le principe d'implémentation de la gigue en js (avec code)

不言original: 2018-08-14 16:25:231376parcourir

Le contenu de cet article concerne le principe d'implémentation du jitter en js (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Principe d'implémentation

Le principe d'implémentation du tramage est en fait de décaler la position des éléments de nœud, donc lors de l'implémentation de cette fonction, il est préférable de positionner de manière absolue les éléments de nœud, puis de modifier leur sommet et valeur gauche.
Il y a plusieurs points clés ici. Le premier est de préparer la fréquence qui doit être compensée. Cela peut être contrôlé en plaçant la distance de décalage dans un tableau. Plus la plage de décalage est petite, plus l'effet est fluide. Le temps de la minuterie détermine la vitesse de battement des nœuds.

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Made with Thimble</title>
    <link rel="stylesheet" href="style.css">
    <style>
        img{
            width:300px;
            height: 400px;
            position:absolute;
            top:20px;
            left:150px;
        }
    </style>
</head>
<body>
<img id="img1" src="https://newimg.uumnt.cc:8092/Pics/2017/0622/03/06.jpg">
</body>
<script>
    var oImg = document.getElementById('img1');
    oImg.onclick = function(){
        //this 到函数里面作用域会变，这里赋值先变成局部
        var that = this;
        shaking(that,'top',function(){
            shaking(that,'left');
        });
    };

    // 抖动函数封装 attr：left水平抖动 top：垂直抖动
    function shaking(obj,attr,callback){
        var pos = parseInt(getStyle(obj,attr));
        var arr = [];
        var num = 0;
        for(var i=20;i>0;i-=2){
            arr.push(i,-i);
        }
        arr.push(0);
        clearInterval(obj.shaking);
        obj.shaking = setInterval(function(){
            obj.style[attr] = pos + arr[num] + 'px';
            num ++;
            if(num === arr.length){
                clearInterval(obj.shaking);
                callback && callback();
            }
        },50);
    }

    // 获取节点对象的样式属性值
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,false)[attr];
        }
    }
</script>
</html>

Recommandations associées :

Analyse du contexte d'exécution et des objets variables en js

Un résumé des méthodes de caractères et des méthodes de manipulation de chaînes en js (avec code)

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!

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：Où le code js doit-il être placé en HTML ?Article suivant：Où le code js doit-il être placé en HTML ?

Articles Liés

Voir plus