So erzielen Sie einen Bildzittereffekt

Anforderungen: Wenn Sie auf das Bild klicken, wackelt das Bild nach links und rechts und kann auch nach oben und unten wackeln.

Der spezifische Code lautet wie folgt:

(Empfohlenes Tutorial: CSS-Tutorial)

html:

<img src="./img/19.jpg" alt="" id="img1">

css:

img {
    position: absolute;
    top: 200px;
    left: 300px;
}

js:

<script src="doMove.js"></script>
<script>
    window.onload = function(){
        var img1 = document.getElementById(&#39;img1&#39;);

        img1.onclick = function(){
            // 先获得img1的原来left值，在此基础上进行抖动;parseInt()是把300px的单位去掉只留数字
            var pos = parseInt(getStyle(img1,&#39;left&#39;));
            var arr = [];//20，-20,18，-18,16，-16，...存放抖动的频率
            var timer = null;//开启定时器
            var num = 0;//一般只要有数组，那么必定有数字跟着变化；数组的第0个，第1个...

            for(var i =20;i>0;i-=2){//左右抖动的幅度第一次为20px，然后减2
                arr.push(i,-i);
            }
            arr.push(0);
            // alert(arr);//测试一下
            // 有抖动的频率之后，要开启定时器让它进行抖动
            clearInterval(timer);//开启定时器之前要先把定时器关闭，防止连续多次点击
            timer = setInterval(function(){
                img1.style.left = pos + arr[num] + &#39;px&#39;;//原来的位置pos,加上数组中每一个数字
                num++;
                if(num === arr.length){//如果数字等于数组的长度（就是全部抖完了），关闭定时器
                    clearInterval(timer);
                }
            },50);
        }
    }
</script>

Anweisungen:

1. Wir müssen zuerst unser Original vorstellen Die gepackte Animationsfunktion doMove.js, getStyle() ist die Funktion in dieser Funktion.

2 entfernt die Einheit von 300px und lässt nur die Zahl 300 übrig nach oben.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Bildzittereffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!