jquery实现图片跟随鼠标
2016-12-28 16:18
239 查看
开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，代码的记下来，浪费了我这么多时间，记你一辈子，这个可以直接在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>
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery实现：提示文本/图片跟随鼠标移动
- jquery实现图片跟随鼠标的实例
- 图片上传生成缩略图，并使用JQuery实现鼠标移动到缩略图显示相应的大图的例子
- jquery实现跟随鼠标移动显示页面信息
- Jquery插件编写和图片跟随鼠标放大插件
- JQuery实现鼠标移动到图片上显示边框效果
- [MFC]SDI在图片背景上实现文本跟随鼠标移动
- JQuery实现一个简单的鼠标跟随提示效果
- 图片鼠标悬浮预览 jquery 实现
- CSS+jQuery实现的鼠标滑过图片周围图片变暗的效果
- jQuery实现鼠标放到图片上，放大图片
- 使用jQuery实现鼠标悬浮图片轮换效果
- 分享一个jquery插件：实现类似淘宝上鼠标经过图片右侧显示大图的效果
- jquery实现的提示浮层跟随鼠标移动
- 基于jquery实现的鼠标滑过按钮改变背景图片
- JQuery实现操作Checkbox,Table,鼠标放在图片上放大效果
- jQuery 实现全选全不选，删除选中复选框所在行，鼠标悬停在图片上显示大图
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果