recherche

Maison  >  Article  >  interface Web  >  Exemple complet d'une simple souris suivant l'effet de couche DiV implémenté par les compétences JS_javascript

Exemple complet d'une simple souris suivant l'effet de couche DiV implémenté par les compétences JS_javascript

WBOY
WBOYoriginal
2016-05-16 15:34:221039parcourir

L'exemple de cet article décrit l'effet de couche DiV simple suivant la souris implémenté dans JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ce code présente une chaîne d'effets Div qui suivent la souris et ont un effet de glissement. Lorsque la souris tremble rapidement, l'effet du calque Div continuera à augmenter et les Div suivants disparaîtront automatiquement. quelques bugs. J'ai hâte de travailler avec vous. Veuillez améliorer cet effet JS.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-simple-mouse-over-div-codes/

Le code spécifique est le suivant : 

<!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>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跟随鼠标的Div效果</title>
<script>
window.onload=function ()
{
 var aDiv=document.getElementsByTagName('div');
 var i=0;
 setInterval(function(){
  for(i=aDiv.length-1;i>0;i--)
  {
   aDiv[i].style.left=aDiv[i-1].style.left;
   aDiv[i].style.top=aDiv[i-1].style.top;
  }
  },5);
 document.onmousemove=function (ev)
 {
  var oEvent=ev||event;
  aDiv[0].style.left=oEvent.clientX+'px';
  aDiv[0].style.top=oEvent.clientY+'px';
 };
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

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 implémente une simulation de recherche Baidu "Fin du monde 2012" sur la page Web avec effet de déchirure du tremblement de terre, compétences code_javascriptArticle suivant：JS implémente une simulation de recherche Baidu "Fin du monde 2012" sur la page Web avec effet de déchirure du tremblement de terre, compétences code_javascript

Articles Liés

Voir plus