js如何实现图片跟随鼠标移动
导读：本文共1394.5字符，通常情况下阅读需要5分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要：这篇文章主要介绍“js如何实现图片跟随鼠标移动”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js如何实现图片跟随鼠标移动”文章能帮助大家解决问题。这里列举了两种实现方法：第一种<!DOCTYPEhtml><html> <head> <metacharset="utf-8"... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。这篇文章主要介绍“js如何实现图片跟随鼠标移动”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“js如何实现图片跟随鼠标移动”文章能帮助大家解决问题。
这里列举了两种实现方法：
第一种
<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> img{ position:fixed; left:0px; top:0px; } </style> </head> <body> <imgsrc="icon_2.png"> <scripttype="text/javascript"> varimg=document.querySelector('img'); //mousemove鼠标移动事件 document.addEventListener('mousemove',function(e){ varpagex=e.pageX-20+'px'; varpagey=e.pageY-20+'px'; //console.log(pagex,pagey); img.style.left=pagex; img.style.top=pagey; }) </script> </body></html>
第二种
<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> img{ position:absolute; width:80px; } </style> </head> <body> <imgsrc="皮影.jpg"id="img"> <scripttype="text/javascript"> window.onmousemove=function(e){ varx=e.pageX; vary=e.pageY; img.style.left=x+'px'; img.style.top=y+'px'; } </script> </body></html>
关于“js如何实现图片跟随鼠标移动”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
本文：
js如何实现图片跟随鼠标移动的详细内容，希望对您有所帮助，信息来源于网络。