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


Posted in jQuery onOctober 17, 2017

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>

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

jQuery 相关文章推荐
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
jQuery响应滚动条事件功能示例
Oct 14 #jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 #jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 #jQuery
You might like
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
php使用array_chunk函数将一个数组分割成多个数组
2018/12/05 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
理解JS绑定事件
2016/01/19 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python找出9个连续的空闲端口
2016/02/01 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python 变量的创建过程详解
2019/09/02 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
pycharm安装及如何导入numpy
2020/04/03 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
项目合作计划书
2014/01/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015年新农合工作总结
2015/03/30 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python