Heim > Artikel > Web-Frontend > Das Implementierungsprinzip von Jitter in js (mit Code)

Das Implementierungsprinzip von Jitter in js (mit Code)

不言Original: 2018-08-14 16:25:231383Durchsuche

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>

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!

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：Wo sollte JS-Code in HTML platziert werden?Nächster Artikel：Wo sollte JS-Code in HTML platziert werden?

In Verbindung stehende Artikel

Mehr sehen