Exemple de code, explication détaillée de l'implémentation javascript de la gigue de fenêtre et des compétences qq window jitter

Exemple de code, explication détaillée de l'implémentation javascript de la gigue de fenêtre et des compétences qq window jitter_javascript

WBOY

Libérer： 2016-05-16 15:22:14

original

1100 Les gens l'ont consulté

L'effet de gigue de la fenêtre est utilisé dans de nombreux endroits. Par exemple, la fenêtre de connexion de NetEase a cet effet. Lorsque la connexion échoue, un effet de gigue apparaîtra. Ceci est non seulement dynamique, mais donne également aux gens un sentiment de nouveauté. paragraphe comme celui-ci, j'aimerais partager l'exemple de code avec vous.

Le code est le suivant :

<!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>

Copier après la connexion

Dans le code ci-dessus, lorsque vous cliquez sur le bouton, le div aura un effet de gigue. Bien sûr, cet effet est relativement simple. Ceci est juste à titre de démonstration. Il peut être étendu dans des applications réelles. au processus de mise en œuvre.

1.Principe de mise en œuvre :

Le code est simple et le principe est également très simple. Le div adopte un positionnement relatif. Lorsque vous cliquez sur le bouton, la fonction fudu() sera appelée en continu via la fonction timer setInterval(). Cette fonction peut définir en continu la valeur de l'attribut left ou top via la méthode modulo, c'est-à-dire en continu. Ajustez aléatoirement la position du div pour obtenir un effet de gigue. Lorsque la valeur de b est supérieure à 15, la gigue s'arrête.

2. Commentaires du code :

1.var a=['top','left'], déclare un tableau qui stocke les chaînes du haut et de gauche.
2.var b=0, déclarez une variable b et attribuez-lui la valeur 0.
3.var u, déclarez une variable comme valeur de retour de la fonction timer setInterval().
4.function fudu(){}, déclarez une fonction.
5.win.style[a[b%2]]=(b )%4<2?"0px":"4px", ce code est la partie principale, la valeur de l'opération modulo b%2 est 0 ou 1, Cela devient la valeur d'index du tableau a et est utilisé pour obtenir la valeur dans le tableau. L'effet de style[a[b%] et style.top est le même. ]]=(b )%4<2?"0px":"4px", de cette façon, les attributs supérieur et gauche du div se voient attribuer des valeurs en prenant le modulo pour déterminer si la valeur est inférieure à 2.
6.if(b>15) {clearInterval(u); b=0}, si la valeur de b est supérieure à 15, arrêtez le tramage et réinitialisez la valeur de b à 0.
7.function zd(){}, déclarez une fonction.
8. clearInterval(u), arrête l'exécution de la fonction de minuterie. Ce code sert à éviter le problème de gigue qui peut ne pas s'arrêter lorsque le bouton est cliqué en continu, car les deux gigues s'influencent mutuellement.
9.u=setInterval(fudu,30), utilisez la fonction timer pour appeler en continu la fonction fudu.
10.window.onload=function(){}, exécutez le code dans la fonction lorsque le contenu du document est complètement chargé.
11.var bt=document.getElementById("bt"), récupère l'objet bouton.
12.var win=document.getElementById("win"), récupère l'objet div.
13.bt.onclick=zd, enregistrez la fonction de gestionnaire d'événements pour le bouton.

Ce qui suit est un code JavaScript qui imite le tremblement de la fenêtre QQ

Un effet de tremblement très unique, imitant l'effet de tremblement de la fenêtre de discussion de QQ. Il est implémenté avec du code JavaScript. Avec cette fausse fenêtre de discussion, je ne m'attendais pas à ce qu'il soit vraiment similaire à l'effet de tremblement de QQ. drôle.

<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>

Copier après la connexion

À travers l'exemple de code ci-dessus, je vais vous présenter l'implémentation de la gigue de fenêtre et de la gigue de fenêtre QQ à l'aide de JavaScript. J'espère que ce code pourra vous aider.