이번 글에서는 마우스의 움직임을 따라가기 위해 js에서 그림을 구현하는 방법을 소개하겠습니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
다음은 두 가지 구현 방법입니다.
첫 번째
<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
<제목></제목>
<스타일 유형="텍스트/css">
img{
위치: 고정;
왼쪽: 0px;
상단: 0px;
}
</style>
</head>
<본문>
<img src="icon_2.png" >
<스크립트 유형="텍스트/자바스크립트">
var img = document.querySelector('img');
// mousemove 마우스 이동 이벤트 document.addEventListener('mousemove',function(e){
var pagex = e.pageX-20+'px';
var 페이지 = e.pageY-20+'px';
// console.log(pagex,pagey);
img.style.left = 페이지x;
img.style.top = 페이지;
})
</script>
</body>
</html>
두 번째 유형
<!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
<제목></제목>
<스타일 유형="텍스트/css">
img{
위치: 절대;
너비: 80px;
}
</style>
</head>
<본문>
<img src="그림자 인형.jpg" id="img">
<스크립트 유형="텍스트/자바스크립트">
window.onmousemove = 함수(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 중국어 사이트의 다른 관련 글을 참고해주세요!
