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

发布时间：2020-09-19 08:18:05 阅读：153 作者：焦點栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

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)" >我是百度，会跟随</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" >我是百度</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)" >我也是百度，也跟随</a> 
    </th> 
  </tr> 
  <div id="1_erweima" > 
    <img src="https://cache.yisu.com/upload/information/20200622/114/62494.png" /> 
  </div> 
  <div id="2_erweima" > 
    <img src="https://cache.yisu.com/upload/information/20200622/114/62494.png" /> 
  </div> 
</table> 
</body> 
</html>

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

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

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

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签