Heim > Artikel > Web-Frontend > JavaScript implementiert den Fensterschütteleffekt

JavaScript implementiert den Fensterschütteleffekt

高洛峰Original: 2016-12-09 15:53:081661Durchsuche

Prinzipielle Einführung

Jitter ist eigentlich eine spezielle Form der Hin- und Herbewegung, mit der Ausnahme, dass die Hin- und Herbewegung eine unendliche Bewegung ohne Reibung ist und auf der Geschwindigkeit basiert, während Jitter auf der Position basiert der Ausgangspunkt

Der häufigste Dithering-Effekt auf Webseiten sollte die Fenster-Dithering-Eingabeaufforderung sein

JavaScript implementiert den Fensterschütteleffekt

Das Dithering-Element beginnt am Startpunkt. Verschieben Sie zuerst das Maximale Entfernung nach rechts und dann Bewegung in die symmetrische linke Position; dann Bewegung in eine etwas kleinere Entfernung nach rechts und Bewegung in die symmetrische linke Position; in diesem Zyklus stoppt das letzte Element am Startpunkt

Code-Implementierung

Bei der Code-Implementierung ist Dithering nichts anderes als die Verwendung eines Timers, um den linken oder oberen Wert in regelmäßigen Abständen zu ändern

Bei der Bewegungsimplementierung gibt es zwei Ideen für Abstandsänderungen .

Idee 1

div.style.left = div.offsetLeft + value;

Erhalten Sie jedes Mal den aktuellen Stil des Elements und berechnen Sie ihn dann mit dem geänderten Wert

Idee 2

left = div.offsetLeft;
......
div.style.left = left + value;

Rufen Sie vor dem Start des Timers den anfänglichen Stil des Elements ab und berechnen Sie ihn dann mit dem geänderten Wert.

Verwenden Sie aus Sicht der Jitter-Implementierung die zweite Methode, um die Abstandsänderung vollständig auf dem Wert zu belassen Relativ einfach

Daher besteht der Schlüssel zur Codeimplementierung darin, zu verstehen, wie sich der Wert ändert

Angenommen, die weiteste Entfernung ist das Ziel und das Entfernungsintervall in derselben Richtung ist der Schritt . Wenn man den Wert intuitiver mit Zahlen ausdrückt, ähnelt er 4, -4, 2, -2, 0. Daher ist eine variable Richtung erforderlich, um die Startrichtung des Schüttelns zu steuern. Die Richtung muss jedes Mal geändert werden, wenn sich der Timer bewegt

//定时器开启前的变量声明
dir = 1;
step = 0;
left = div.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
div.style.left = left + value + &#39;px&#39;;
if(dir === -1){
step++; 
}
dir = -dir;

Kapseln Sie den Schütteleffekt als shakeMove.js

function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
} 
function shakeMove(json){
//声明要进行抖动的元素
var obj = json.obj;
//声明元素抖动的最远距离
var target = json.target;
//默认值为20
target = Number(target) || 20;
//声明元素的变化样式
var attr = json.attr;
//默认为&#39;left&#39; 
attr = attr || &#39;left&#39;; 
//声明元素的起始抖动方向
var dir = json.dir;
//默认为&#39;1&#39;，表示开始先向右抖动
dir = Number(dir) || &#39;1&#39;;
//声明元素每次抖动的变化幅度
var stepValue = json.stepValue;
stepValue = Number(stepValue) || 2;
//声明回调函数 
var fn = json.fn;
//声明步长step
var step = 0;
//保存样式初始值
var attrValue = parseFloat(getCSS(obj,attr));
//声明参照值value
var value;
//清除定时器
if(obj.timer){return;}
//开启定时器
obj.timer = setInterval(function(){
//抖动核心代码
value = dir*(target - step);
//当步长值大于等于最大距离值target时
if(step >= target){
step = target
}
//更新样式值
obj.style[attr] = attrValue + value + &#39;px&#39;;
//当元素到达起始点时，停止定时器
if(step == target){
clearInterval(obj.timer);
obj.timer = 0;
//设置回调函数
fn && fn.call(obj); 
} 
//如果此时为反向运动，则步长值变化
if(dir === -1){
step = step + stepValue; 
}
//改变方向
dir = -dir; 
},50); 
}

Beispielanwendung

Im Folgenden wird der gekapselte shakeMove verwendet, um einige einfache Schüttelanwendungen zu implementieren

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
} 
</style>
</head>
<body>
<div id="box">
<div style="left:10px;background:lightblue"></div>
<div style="left:70px;background:lightgreen"></div>
<div style="left:130px;background:pink"></div>
<div style="left:190px;background:lightcoral"></div>
<div style="left:250px;background:orange"></div>
</div>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var aDiv = box.getElementsByTagName(&#39;div&#39;);
for(var i = 0; i < aDiv.length; i++){
aDiv[i].onmouseover = function(){
shakeMove({obj:this,attr:&#39;top&#39;});
}
}
</script>
</body>
</html>

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：Eine äußerst einfache AnforderungsimplementierungsmethodeNächster Artikel：Eine äußerst einfache Anforderungsimplementierungsmethode

In Verbindung stehende Artikel

Mehr sehen