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中each循环的简单回滚操作
May 05 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
nodejs实现截取上传视频中一帧作为预览图片
2017/12/10 NodeJs
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
layui自定义ajax左侧三级菜单
2019/07/26 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
为什么说python更适合树莓派编程
2020/07/20 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
幼儿园消防演练方案
2014/02/13 职场文书
大学班级学风建设方案
2014/05/01 职场文书
大学计划书范文800字
2014/08/14 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python