jquery鼠标移动图片的小例子

来源:互联网 发布:淘宝禁售 编辑:程序博客网 时间:2024/04/30 02:39

随手用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>

0 0
原创粉丝点击