l'image js suit les compétences code_javascript du mouvement de la souris

Sur de nombreux sites Web, vous pouvez voir des effets JS qui permettent aux images de suivre le mouvement de la souris. En fait, la méthode est très simple, je vais donc la partager avec vous ici.

Avant d'implémenter cet effet spécial, vous devez comprendre un objet en JS, event (event object). Oui, il vous suffit de comprendre cet objet. Je n'entrerai pas dans les détails sur les propriétés de sa méthode. Si vous souhaitez en savoir plus, cliquez ici, http://www.jb51.net/article/17266.htm.

Nous n'utilisons que deux propriétés de cet objet, clientX et clientY, qui sont les coordonnées X et Y de la souris dans la zone de la fenêtre (elles sont toutes les deux C'est un attribut en lecture seule, donc il ne peut être obtenu, pas set). À ce stade, de nombreuses chaussures pour enfants savent peut-être déjà comment le faire. Oui, c'est tout ! Attribuez simplement les coordonnées obtenues à Gauche et Haut dans l'attribut de positionnement de l'image. C'est très simple ! Une petite démo de la mise en œuvre est fournie ci-dessous.
Matériel : Deux images que vous aimez, nommez-les ici comme "MUp.png" et "MDown.png". Pourquoi y a-t-il deux images ici, nous réalisons également l'effet du changement d'image en appuyant sur la souris.

Le code HTML est ici :

<div id="Main">
   <img src="MUp.png" id="Img"/>
 </div>
CSS Code is Here:
 *{ margin:px; padding:px;}
 #Img{ position:absolute; top:px; left:px;}
 #Main{ background-color:#F; width:px; height:px;}
JS Code is Here:
 window.onload=Main;
 //全局坐标变量
  var x="";
  var y="";
  //定位图片位置
  function GetMouse(oEvent)
  {
   x=oEvent.clientX;
   y=oEvent.clientY;
  document.getElementById("Img").style.left=(parseInt(x)-)+"px";
  document.getElementById("Img").style.top=y+"px";
  }
 //入口
 function Main()
 {
  var ele=document.getElementById("Main");
  //注册鼠标移动事件
  ele.onmousemove=function(){GetMouse(event);}
  // 注册鼠标按下事件
  ele.onmousedown=function(){ChangeBg("Img","MUp.png");}
  //注册鼠标弹回事件
  ele.onmouseup=function(){ChangeBg("Img","MDown.png");}
  }
 //图片变化
 function ChangeBg(id,url)
 {
  document.getElementById(id).src=url;
 }