快捷導(dǎo)航

jquery實(shí)現(xiàn)圖片跟隨鼠標(biāo)的實(shí)例

更新時間：2017年10月17日 11:33:47 作者：焦點(diǎn)

這篇文章主要介紹了 jquery實(shí)現(xiàn)圖片跟隨鼠標(biāo)的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下

jquery實(shí)現(xiàn)圖片跟隨鼠標(biāo)的實(shí)例

開發(fā)后臺寫頁面困難的一比啊，想寫個鼠標(biāo)移動某連接右側(cè)顯示二維碼，并跟隨鼠標(biāo)移動的功能，各種查資料，花了一小天終于搞出來了，代碼的記下來，浪費(fèi)了我這么多時間，記你一輩子，這個可以直接在W3School直接運(yùn)行，可以根據(jù)某行顯示某個特定的圖片，自己定義就行

實(shí)現(xiàn)代碼：

<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圖片跟隨鼠標(biāo)</title> 
  <script type="text/javascript"> 
    function hideImg(num){ 
      if(num.className == "1_name"){ 
        $('#1_erweima').hide(); 
      }else if(num.className == "2_name"){ 
        $('#2_erweima').hide(); 
      } 
    } 
 
    function showImg(num) { 
      var intX = window.event.clientX; 
      var intY = window.event.clientY; 
      if (num.className == "1_name") { 
        $('#1_erweima').css("left", intX + 20 + "px"); 
        $('#1_erweima').css("top", intY + 10 + "px"); 
        $('#1_erweima').show(); 
      } else if (num.className == "2_name") { 
        $('#2_erweima').css("left", intX + 20 + "px"); 
        $('#2_erweima').css("top", intY + 10 + "px"); 
        $('#2_erweima').show(); 
      } 
    } 
  </script> 
</head> 
<body> 
<table> 
  <tr> 
    <th> 
      <a  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  rel="external nofollow" rel="external nofollow" rel="external nofollow" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a> 
    </th> 
  </tr> 
  <tr> 
    <th> 
      <a  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> 
  <div 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" /> 
  </div> 
  <div 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" /> 
  </div> 
</table> 
</body> 
</html>

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: