Heim >Web-Frontend >js-Tutorial >JavaScript-Implementierung des Fenster-Jitter-Effekt-Beispielcodes

JavaScript-Implementierung des Fenster-Jitter-Effekt-Beispielcodes

怪我咯Original: 2017-07-04 15:14:532124Durchsuche

Der Jitter-Effekt tritt häufig auf allen wichtigen Webseiten auf. Dieser Artikel stellt hauptsächlich die relevanten Informationen zu JavaScript vor. Er ist sehr gut und hat Referenzwert kann sich darauf beziehen.

Prinzipielle Einführung

Jitter ist eigentlich eine spezielle Form der Hin- und Herbewegung, aber Hin- und Herbewegung ist eine unendliche Bewegung ohne Reibung und basiert auf der Geschwindigkeit; während Jitter die Position als Referenz verwendet und schließlich am Startpunkt stoppt

Einer der häufigsten Jitter-Effekte auf Webseiten sollte die Fenster-Jitter-Eingabeaufforderung sein

Ausgehend vom Startpunkt bewegt sich das Jitter-Element zunächst um die maximale Distanz len nach rechts und dann in die symmetrische linke Position; nach rechts und bewegt sich dann zur symmetrischen linken Position; in dieser Schleife stoppt das letzte Element am Startpunkt

Code-Implementierung

Dithering in der Code-Implementierung ist nichts anderes, als durch den Timer den linken oder oberen Wert in regelmäßigen Abständen ändern zu lassen

Bei der Implementierung von Bewegung gibt es zwei Ideen für Abstandsänderungen

Idee 1

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

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

Idee 2

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

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

Aus Sicht der Jitter-Implementierung Verwenden Sie die zweite Methode, um den Abstand vollständig zu ändern. Es ist einfacher, den Wert ändern zu lassen.

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

Die weiteste Entfernung ist das Zielziel, und das Entfernungsintervall in derselben Richtung ist die Schrittweite. 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 = p.offsetLeft
//定时器里面的代码
value = dir*(target - step);
if(step >= target){
step = target
}
p.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 lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
height: 50px;
width: 50px;
position: absolute;
top: 50px;
} 
</style>
</head>
<body>
<p id="box">
<p class="test" style="left:10px;background:lightblue"></p>
<p class="test" style="left:70px;background:lightgreen"></p>
<p class="test" style="left:130px;background:pink"></p>
<p class="test" style="left:190px;background:lightcoral"></p>
<p class="test" style="left:250px;background:orange"></p>
</p>
<script src="http://files.cnblogs.com/files/xiaohuochai/shakeMove.js"></script>
<script>
var ap = box.getElementsByTagName(&#39;p&#39;);
for(var i = 0; i < ap.length; i++){
ap[i].onmouseover = function(){
shakeMove({obj:this,attr:&#39;top&#39;});
}
}
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonJavaScript-Implementierung des Fenster-Jitter-Effekt-Beispielcodes. 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：Beispielcode für den manuellen Umschalteffekt des js-BildkarussellsNächster Artikel：Beispielcode für den manuellen Umschalteffekt des js-Bildkarussells

In Verbindung stehende Artikel

Mehr sehen