欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery实现图片跟随鼠标的实例

程序员文章站 2022-06-24 17:24:32
jquery实现图片跟随鼠标的实例  开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,...

jquery实现图片跟随鼠标的实例

 开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在w3school直接运行,可以根据某行显示某个特定的图片,自己定义就行

实现代码:

<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"){ 
        $('#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 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> 
  <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> 

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!