jquery实现图片跟随鼠标
来源:互联网 发布:绍兴网络电视台直播 编辑:程序博客网 时间:2024/05/03 08:09
开发后台写页面困难的一比啊,想写个鼠标移动某连接右侧显示二维码,并跟随鼠标移动的功能,各种查资料,花了一小天终于搞出来了,代码的记下来,浪费了我这么多时间,记你一辈子,这个可以直接在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/" 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/" class="1_name" target="_blank" style="color: #1192cc;">我是百度</a> </th> </tr> <tr> <th> <a href="https://www.baidu.com/" 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>
0 0
- jquery实现图片跟随鼠标
- jquery实现:提示文本/图片跟随鼠标移动
- 图片跟随鼠标移动(jquery)
- JS实现图片跟随鼠标移动
- JQuery鼠标跟随效果
- jquery 鼠标跟随提示
- 跟随鼠标图片
- 图片跟随鼠标移动
- 图片跟随鼠标
- 图片跟随鼠标偏移
- jQuery鼠标悬浮链接弹出跟随图片实例代码
- jquery加CSS3实现导航跟随鼠标移动
- jquery实现导航栏随鼠标点击跟随滑动动画
- jquery div 跟随鼠标移动
- jquery元素跟随鼠标移动
- 跟随鼠标飘动的图片
- 跟随鼠标的图片效果
- 鼠标跟随图片看大图
- top stat or ps stat
- Nginx使用gadyy证书
- Spark编程环境搭建-超详细代码(可下载)
- 使用Sublime text3 配置markdown
- HTTP协议浅析(下): 使用HTTP协议实现通信
- jquery实现图片跟随鼠标
- 工作中Git的用法
- java实现定时任务的三种方法
- ora-22992 通过DBLINK 访问远程CLOB表问题
- mysqldump gtid
- nodejs代码覆盖率
- Linux内核抢占实现机制
- Caffe源码解析caffe.cpp
- 繁简体转换js