js实现图片跟随鼠标移动的方法是什么？
导读：这篇文章给大家分享的是“js实现图片跟随鼠标移动的方法是什么？”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“js实现图片跟随鼠标移动的方法是什么？”吧。...
这篇文章给大家分享的是“js实现图片跟随鼠标移动的方法是什么？”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“js实现图片跟随鼠标移动的方法是什么？”吧。
这里列举了两种实现方法：
第一种
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
/title>
style type="text/css">
img{
position: fixed;
left: 0px;
top: 0px;
}
/style>
/head>
body>
img src="icon_2.png" >
script type="text/javascript">
var img = document.querySelector('img');
// mousemove鼠标移动事件
document.addEventListener('mousemove',function(e){
var pagex = e.pageX-20+'px';
var pagey = e.pageY-20+'px';
// console.log(pagex,pagey);
img.style.left = pagex;
img.style.top = pagey;
}
)
/script>
/body>
/html>
第二种
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>
/title>
style type="text/css">
img{
position: absolute;
width: 80px;
}
/style>
/head>
body>
img src="皮影.jpg" id="img">
script type="text/javascript">
window.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
/script>
/body>
/html>
以上就是关于js实现图片跟随鼠标移动的方法是什么？的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： js实现图片跟随鼠标移动的方法是什么？
本文地址： https://pptw.com/jishu/653376.html