Heim > Artikel > Web-Frontend > Beispielcode, detaillierte Erläuterung der Javascript-Implementierung von Window Jitter und QQ Window Jitter_Javascript-Fähigkeiten

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

WBOYOriginal: 2016-05-16 15:22:141056Durchsuche

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>

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 )%4629d56eb1b7d6f05268c49024ee60a9a15) {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>

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.

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：js-Implementierungscode für Bild-in-Bild-Werbung auf der Informationsseite (wie man Anzeigen in den Text lädt)_Javascript-KenntnisseNächster Artikel：js-Implementierungscode für Bild-in-Bild-Werbung auf der Informationsseite (wie man Anzeigen in den Text lädt)_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen