Maison > Article > interface Web > js pour obtenir plusieurs effets de mouvement sur les mêmes compétences page_javascript

js pour obtenir plusieurs effets de mouvement sur les mêmes compétences page_javascript

WBOYoriginal: 2016-05-16 16:04:521134parcourir

L'exemple de cet article décrit la méthode d'utilisation de js pour obtenir plusieurs effets de mouvement sur la même page. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Le principe de mise en œuvre est d'ajouter des événements à ces cinq éléments en boucle lors de l'appel. Notez que les minuteries de chaque élément doivent être séparées.

Point 1 :

var speed = (target - obj.offsetWidth)/8;

Effet de mouvement tampon, très rapide au début, puis de plus en plus lent jusqu'à ce qu'il s'arrête

speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);

Si la vitesse est supérieure à 0, arrondissez à l'unité supérieure, si la vitesse est inférieure à 0, arrondissez à l'unité inférieure.

Point 2 :

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+"px";
}

Comparez la largeur de l'élément avec la valeur cible. Si elles sont égales, fermez le minuteur. Sinon, la largeur continue d'augmenter.

Point trois :

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].onmouseover = function(){
startrun(this,300);
}
runs_li[i].onmouseout = function(){
startrun(this,80);
}
}

Ajoutez son propre attribut de minuterie et son propre événement de souris à chaque élément, et appelez la fonction de mouvement dans l'événement de souris.

Enfin, ajoutez le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
position:absolute; left:0;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0;
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].onmouseover = function(){
  startrun(this,300);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,80);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = (target - obj.offsetWidth)/8;
 speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
 
 if(obj.offsetWidth == target){
  clearInterval(obj.timer);
 }else{
  obj.style.width = obj.offsetWidth+speed+"px";
 }
 document.title = obj.offsetWidth + ',' + target;
 },30);
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
 <li style="top:360px;">5</li>
</ul>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

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：Comment implémenter des onglets simples et des effets de commutation automatique dans les compétences js_javascriptArticle suivant：Comment implémenter des onglets simples et des effets de commutation automatique dans les compétences js_javascript

Articles Liés

Voir plus