jquery implementiert Bilder, die der Mausbewegung folgen-js-Tutorial-php.cn

jquery implementiert Bilder, die der Mausbewegung folgen

小云云

Freigeben： 2018-01-15 13:19:05

Original

2679 Leute haben es durchsucht

Ich möchte eine Funktion schreiben, die einen QR-Code auf der rechten Seite einer bestimmten Verbindung anzeigt und der Mausbewegung folgt. Dieser Artikel stellt hoffentlich hauptsächlich die relevanten Informationen zur Implementierung von Bildern vor, die der Maus folgen Dieser Artikel kann jedem helfen, eine solche Funktion zu realisieren. Freunde in Not können sich darauf beziehen. Ich hoffe, er kann allen helfen.

Implementierungscode:

<html> 
<head> 
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>jquery图片跟随鼠标</title> 
  <script type="text/javascript"> 
    function hideImg(num){ 
      if(num.className == "1_name"){ 
        $(&#39;#1_erweima&#39;).hide(); 
      }else if(num.className == "2_name"){ 
        $(&#39;#2_erweima&#39;).hide(); 
      } 
    } 
 
    function showImg(num) { 
      var intX = window.event.clientX; 
      var intY = window.event.clientY; 
      if (num.className == "1_name") { 
        $(&#39;#1_erweima&#39;).css("left", intX + 20 + "px"); 
        $(&#39;#1_erweima&#39;).css("top", intY + 10 + "px"); 
        $(&#39;#1_erweima&#39;).show(); 
      } else if (num.className == "2_name") { 
        $(&#39;#2_erweima&#39;).css("left", intX + 20 + "px"); 
        $(&#39;#2_erweima&#39;).css("top", intY + 10 + "px"); 
        $(&#39;#2_erweima&#39;).show(); 
      } 
    } 
  </script> 
</head> 
<body> 
<table> 
  <tr> 
    <th> 
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我是百度，会跟随</a> 
    </th> 
  </tr> 
  <tr> 
    <th> 
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a> 
    </th> 
  </tr> 
  <tr> 
    <th> 
      <a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="2_name" target="_blank" onmouseout="hideImg(this)" onmousemove="showImg(this)" onmouseover="showImg(this)" style="color: #1192cc;">我也是百度，也跟随</a> 
    </th> 
  </tr> 
  <p id="1_erweima" style="display:none;right:20;position:absolute;"> 
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" /> 
  </p> 
  <p id="2_erweima" style="display:none;right:20;position:absolute;"> 
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" /> 
  </p> 
</table> 
</body> 
</html>

Nach dem Login kopieren

Verwandte Empfehlungen:

jQuery-Implementierung von div follow Maus Erklärung von Bewegungsmethoden

Erklärung detaillierter Beispiele mit JS zur Implementierung von Kreuzkoordinaten nach dem Mauseffekt

Verwendung von JS zur Implementierung von Blasen nach dem Spezialeffekte für Mausbewegungsanimationen

Das obige ist der detaillierte Inhalt vonjquery implementiert Bilder, die der Mausbewegung folgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!