jquery实现图片跟随鼠标的实例
程序员文章站
2022-06-24 17:24:32
jquery实现图片跟随鼠标的实例
开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，...
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>
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
上一篇： vue实现全选、反选功能