Beispielcode, detaillierte Erläuterung der Javascript-Implementierung von Window Jitter und QQ Window Jitter_Javascript-Fähigkeiten-js-Tutorial-php.cn

Beispielcode, detaillierte Erläuterung der Javascript-Implementierung von Window Jitter und QQ Window Jitter_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:22:14

Original

1106 Leute haben es durchsucht

Der Fenster-Jitter-Effekt wird an vielen Stellen verwendet. Wenn die Anmeldung fehlschlägt, tritt ein Jitter-Effekt auf Wenn Sie einen Absatz wie diesen haben, möchte ich das Codebeispiel mit Ihnen teilen.

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>窗口登陆效果</title>
<style type="text/css">
#win
{
 position:relative;
 width:100px;
 height:100px;
 background-color:#666;
}
</style>
<script type="text/javascript"> 
var a=['top','left'];
var b=0; 
var u;
function fudu()
{ 
 win.style[a[b%2]]=(b++)%4<2&#63;"0px":"4px"; 
 if(b>15)
 {
 clearInterval(u);
 b=0
 } 
}
function zd()
{
 clearInterval(u); 
 u=setInterval(fudu,32) 
} 
window.onload=function()
{
 var bt=document.getElementById("bt");
 var win=document.getElementById("win");
 bt.onclick=zd;
}
</script> 
</head> 
<body > 
<button id="bt">点击振动</button> 
<div id="win"></div> 
</body> 
</html>

Nach dem Login kopieren

Wenn im obigen Code auf die Schaltfläche geklickt wird, ist dieser Effekt natürlich relativ einfach. Er kann in tatsächlichen Anwendungen erweitert werden zum Umsetzungsprozess.

1. Umsetzungsprinzip:

Der Code ist einfach und das Prinzip ist auch sehr einfach. Wenn Sie auf die Schaltfläche klicken, wird die Funktion fudu () kontinuierlich über die Timer-Funktion setInterval () aufgerufen. Diese Funktion kann den Attributwert von links oder oben kontinuierlich über die Modulo-Methode festlegen Passen Sie die Position des Divs nach dem Zufallsprinzip an, um einen Jitter-Effekt zu erzielen. Wenn der Wert von b größer als 15 ist, hört das Jitter auf.

2. Codekommentare:

1.var a=['top','left'], deklariert ein Array, das obere und linke Zeichenfolgen speichert.
2.var b=0, deklarieren Sie eine Variable b und weisen Sie ihr den Wert 0 zu.
3.var u, deklarieren Sie eine Variable als Rückgabewert der Timer-Funktion setInterval().
4.Funktion fudu(){}, deklarieren Sie eine Funktion.
5.win.style[a[b%2]]=(b )%4<2?"0px":"4px", dieser Code ist der Kernteil, der Wert der b%2-Modulo-Operation ist 0 oder 1, Dies wird zum Indexwert von Array a und wird verwendet, um den Wert im Array zu erhalten. Der Effekt von style[a[b%] und style.top ist der gleiche. ]]=(b )%4<2?"0px":"4px", auf diese Weise werden den oberen und linken Attributen des div Werte zugewiesen, indem Modulo verwendet wird, um zu bestimmen, ob der Wert kleiner als 2 ist.
6.if(b>15) {clearInterval(u); b=0}, wenn der Wert von b größer als 15 ist, dann stoppen Sie das Dithering und setzen Sie den Wert von b auf 0 zurück.
7.Funktion zd(){}, deklarieren Sie eine Funktion.
8. clearInterval(u), stoppt die Ausführung der Timer-Funktion. Dieser Code soll das Problem des Jitters verhindern, der möglicherweise nicht stoppt, wenn die Schaltfläche kontinuierlich angeklickt wird, da sich die beiden Jitter gegenseitig beeinflussen.
9.u = setInterval (fudu, 30), verwenden Sie die Timer-Funktion, um die Fudu-Funktion kontinuierlich aufzurufen.
10.window.onload=function(){}, führen Sie den Code in der Funktion aus, wenn der Dokumentinhalt vollständig geladen ist.
11.var bt=document.getElementById("bt"), holen Sie sich das Schaltflächenobjekt.
12.var win=document.getElementById("win"), holen Sie sich das div-Objekt.
13.bt.onclick=zd, registrieren Sie die Event-Handler-Funktion für die Schaltfläche.

Das Folgende ist ein JavaScript-Code, der das Wackeln des QQ-Fensters imitiert

Ein sehr einzigartiger Shake-Effekt, der den Shake-Effekt des QQ-Chat-Fensters nachahmt. Er wurde mit JavaScript-Code implementiert, ich hätte nicht erwartet, dass er dem Shake-Effekt von QQ wirklich ähnelt lustig.

<title>仿QQ窗口抖动</title>
<img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg">
<br /><br />
<button onclick="zd()">让我抖一下！</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b++)%4<2&#63;0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

Nach dem Login kopieren

Anhand des obigen Beispielcodes werde ich Ihnen die Implementierung von Fenster-Jitter und QQ-Fenster-Jitter mit JavaScript vorstellen. Ich hoffe, dieser Code kann Ihnen helfen.