Maison > Article > interface Web > 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

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

WBOYoriginal: 2016-05-16 15:22:141053parcourir

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>

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 )%4b475e28e35df383ee56c6cfa06c96baa15) {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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js code d'implémentation pour la publicité image dans l'image dans la page d'information (comment charger des annonces dans le texte)_compétences javascriptArticle suivant：js code d'implémentation pour la publicité image dans l'image dans la page d'information (comment charger des annonces dans le texte)_compétences javascript

Articles Liés

Voir plus