JavaScript로 마우스 팔로우를 구현하는 방법
- 藏色散人원래의
- 2021-06-27 10:18:022817검색
JavaScript에서 마우스 추적을 구현하는 방법: 1. "evt || window.event;"를 설정합니다. 2. "function(evt)"를 생성합니다. 3. "document.body.scrollTop;"을 생성합니다. 마우스 위치 요소의 위치 값에 위치 값을 할당하면 됩니다.
이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript에서 마우스 따라가기를 구현하는 방법은 무엇입니까?
간단한 마우스 따라가기 효과를 구현하는 JS 메서드
간단한 마우스 따라가기 효과를 구현하는 JS 메서드. 구체적인 분석은 다음과 같습니다.
Mouse follow는 이름 그대로 마우스가 움직일 때 마우스를 따라가는 애니메이션이 있다는 뜻입니다.
포인트 1:
var oEvent = evt || window.event;
IE 및 FF와 호환되도록 작성되었습니다. IE에서는 window.event가 이벤트 객체를 나타내고, FF에서는 이벤트 함수에 매개변수가 전달되는데, 이 매개변수는 이벤트 객체를 나타냅니다. 이벤트 객체.
포인트 2:
document.onmousemove = function(evt)
마우스 팔로우는 마우스가 움직일 때 일어나는 일입니다.
포인트 3:
document.documentElement.scrollTop || document.body.scrollTop;
스크롤바와 상단 스크롤 사이의 거리는 후자를 사용하고, 다른 브라우저는 전면을 사용합니다.
포인트 4:
oTop.style.top=oEvent.clientY+scrolltop+10+"px";
마우스가 움직일 때 요소의 위치 값에 마우스의 현재 위치를 할당합니다.
oEvent.clientY는 마우스의 현재 Y좌표 위치입니다. 첫 번째 화면이 아닌 다른 화면으로 스크롤할 때 마우스 추종 효과가 그대로 유지되도록 스크롤탑에 추가된 거리가 기록됩니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{
width:30px;
height:40px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
</style>
<script>
window.onload = function(){
var oTop = document.getElementById("to_top");
document.onmousemove = function(evt){
var oEvent = evt || window.event;
var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
}
}
</script>
</head>
<body style="height:1000px;">
<a href="#">文字</a>
<div id="to_top">鼠标跟随</div>
</body>
</html>[추천 학습: javascript 고급 튜토리얼]
위 내용은 JavaScript로 마우스 팔로우를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!