图片随鼠标移动

时间:2021-06-16 17:46:14   收藏:0   阅读:0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
position: absolute;
top: 2px;
}
</style>
</head>
<body>
<img src="images/angel.gif" >

<script type="text/javascript">
//【案例】图片跟随鼠标移动
//案例需求:简单实现图片跟随鼠标移动的效果(不考虑兼容性)。
//案例分析:需要使用鼠标指针移动事件mousemove,每次鼠标移动,都会获得最新的鼠标指针坐标,
//把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。

var img=document.querySelector(‘img‘);
document.addEventListener(‘mousemove‘,function one(e){
var x=e.pageX || e.clientX + (document.body.scrillLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollLeft);;
img.style.left=x+‘px‘;
img.style.top=y+‘px‘;
})

</script>
</body>
</html>

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!