jquery鼠标移动图片的小例子

fanzhang1990

于 2014-03-16 23:26:51 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web技术

本文链接：https://blog.youkuaiyun.com/fanzhang1990/article/details/21345687

前端web技术专栏收录该内容

23 篇文章

订阅专栏

本文通过一个简单的实例演示了如何使用 jQuery 实现图片跟随鼠标移动的效果。该示例利用了 mousemove 事件来实时更新图片的位置，并在页面上显示当前鼠标的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

随手用jquery写了一个图片随鼠标移动的小例子，玩玩。

<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标移动的效果</title>
<style type=text/css>

div{
position: absolute;
left:100px;
width: 70px;
height: 60px;
font-size: 10px;
}
img{

width: 60px;
height: 35px;
}
p{
margin-top: 5px;
width: 70px;
height: 20px;
}

</style>
</head>
<body>
<div>
<img class="_img" src="4.png">
<p></p>
</div>
<script src="jquery-1.10.2.js"></script>
<script>
$(document).ready(function(e){

var _top =0;
var _left=0;
var x =0;
$(this).on("mousemove",function(event){
_left = event.pageX;
_top = event.pageY;
$("div").css("left", _left + "px");
$("div").css("top", _top + "px");
$("p").html("位置是:" +　_left + "," + _top);
});

});
</script>
</body>
</html>