版权声明:转载请注明出处:http://blog.csdn.net/Guobeibei_123 https://blog.csdn.net/Guobeibei_123/article/details/80760086
图片跟随鼠标的移动
<html>
<head>
<style type="text/css">
#img {
position:absolute;/*绝对位置*/
}
</style>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
//第一种方式
//鼠标的移动事件
$(document).mousemove(function (e) {
//定义一个X轴的位置
var page_x = parseInt(e.pageX + 12) + "px";
//定义一个Y轴的位置
var page_y = e.pageY + "px";
//图片的左边X轴,上部Y轴
$("#img").css({
"left": page_x,
"top": page_y
});
});
//第二种方式
//鼠标的移动
$(document).mousemove(function (e) {
//position位置,absolute绝对的
//绝对值的引用,左边X轴,上边Y轴
$("#img").css({"position":"absolute","left":e.pageX , "top":e.pageY});
});
});
</script>
</head>
<body>
<div id="img">
<!--图片-->
<img src="萌萌哒.jpg" />
</div>
</body>
</html>