码迷,mamicode.com
首页 > 移动开发 > 详细

图片随鼠标移动

时间:2021-06-16 17:46:14      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:scrolltop   client   har   list   dde   src   鼠标   oct   java   

<!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>

图片随鼠标移动

标签:scrolltop   client   har   list   dde   src   鼠标   oct   java   

原文地址:https://www.cnblogs.com/nuanyan/p/14887405.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!