首页  >  文章  >  web前端  >  jquery实现图片跟随鼠标移动

jquery实现图片跟随鼠标移动

小云云
小云云原创
2018-01-15 13:19:052656浏览

想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,本文主要介绍了 jquery实现图片跟随鼠标的实例的相关资料,希望通过本文能帮助到大家实现这样的功能,需要的朋友可以参考下,希望能帮助到大家。

实现代码:


<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>

相关推荐:

jQuery实现div跟随鼠标移动方法讲解

实例详解JS实现十字坐标跟随鼠标效果

使用JS实现气泡跟随鼠标移动动画特效实例详解

以上是jquery实现图片跟随鼠标移动的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn