js를 사용하여 마우스 움직임을 따르는 이미지를 구현하는 두 가지 방법
- 藏色散人앞으로
- 2022-08-07 10:09:153448검색
이 기사에서는 마우스의 움직임을 따라가기 위해 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>
관련 권장 사항: [JavaScript 비디오 튜토리얼]
위 내용은 js를 사용하여 마우스 움직임을 따르는 이미지를 구현하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제