Le principe d'implémentation de la gigue en js (avec code)-js tutoriel-php.cn

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

不言

Libérer： 2018-08-14 16:25:23

original

1396 Les gens l'ont consulté

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>

Copier après la connexion

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!