Das Implementierungsprinzip von Jitter in js (mit Code)-js-Tutorial-php.cn

Das Implementierungsprinzip von Jitter in js (mit Code)

不言

Freigeben： 2018-08-14 16:25:23

Original

1384 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Implementierungsprinzip von Jitter (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Implementierungsprinzip

Das Implementierungsprinzip von Dithering besteht eigentlich darin, die Position von Knotenelementen zu versetzen. Daher ist es bei der Implementierung dieser Funktion am besten, die Knotenelemente absolut zu positionieren und dann ihre Ober- und Unterseite zu ändern linken Wert.
Hier gibt es mehrere wichtige Punkte: Die zu versetzende Frequenz kann durch Eingabe des Versatzbereichs gesteuert werden. Die Timerzeit bestimmt die Geschwindigkeit des Knotenflatterns.

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

Analyse des Ausführungskontexts und variabler Objekte in js

Eine Zusammenfassung von Zeichenmethoden und String-Manipulationsmethoden in js (mit Code)

Das obige ist der detaillierte Inhalt vonDas Implementierungsprinzip von Jitter in js (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!