• 技术文章 >web前端 >js教程

    jquery实现图片跟随鼠标移动

    小云云小云云2018-01-15 13:19:05原创1720
    想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,本文主要介绍了 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"){ 
            $('#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> 
      <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核实处理。
    专题推荐:jquery 鼠标 跟随
    上一篇:JS实现scroll自定义滚动效果 下一篇:vue获取input输入值详解
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 一文搞定JavaScript的节点操作• JavaScript类数组和可迭代对象的实现原理详解• 带你深入了解HTTP模块• 聊聊Node.js path模块中的常用工具函数• 手把手带你使用node开发一个命令行压缩工具
    1/1

    PHP中文网