这篇文章主要介绍“js如何实现图片跟随鼠标移动”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js如何实现图片跟随鼠标移动”文章能帮助大家解决问题。
创新互联建站长期为超过千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为枣庄企业提供专业的成都网站建设、网站建设，枣庄网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
这里列举了两种实现方法：
第一种
img{
position: fixed;
left: 0px;
top: 0px;
}
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;
})
第二种
img{
position: absolute;
width: 80px;
}
window.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
img.style.left = x+'px';
img.style.top = y+'px';
}
关于“js如何实现图片跟随鼠标移动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
网站栏目：js如何实现图片跟随鼠标移动
文章路径：
http://bjjierui.cn/article/jgspdh.html
