This article will introduce to you how to implement pictures in js to follow the movement of the mouse. Here are two implementation methods. I hope it will be helpful to friends in need!
Here are two implementation methods:
The first
<!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 mouse movement event 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>
The second type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{
position: absolute;
width: 80px;
}
</style>
</head>
<body>
<img src="shadow puppet.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> 
Related recommendations: [JavaScript Video Tutorial]
The above are the details of the two methods of using js to implement images that follow the mouse movement. For more information, please pay attention to other related articles on the PHP Chinese website!
