首先写一个鼠标指针移动时发生 mousemove 事件，然后定义X\Y，轴给X\Y轴赋值，然后选择图片写图片的css样式，第一步设置图片的大小，第二步将图片设置绝对定位 position:absolute，最后获取X\Y分别给left=e.pageX,top=e.pageY 。如果图片不现实效果的话就让e.pageY 、e.pageX，分别加5；如：“top”：e.pageY+5，“left”：e.pageX+5；这种情况是因为浏览器的问题，建议使用谷歌浏览器或者Edge。
<script type="text/javascript">
$(function () {
//鼠标指针移动时发生 mousemove 事件
$(document).mousemove(function (e) {
//获取鼠标坐标：
var X = e.pageX;
var Y = e.pageY;
//获取鼠标坐标e.pageX e.pageY，给图片添加绝对位置 position:absolute 改变图片大小
$(".image_XY").css({ "width": "100px", "height": "100px", "position": "absolute", "left": e.pageX, "top": e.pageY });
});
});
</script><body>
<div class="Angel">
<img src="img/ts.png" class="image_XY" />
</div>
</body>
扫一扫
3089
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
