이 기사에서는 마우스로 텍스트를 이동하는 JS의 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
이것은 매우 간단한 마우스 기능 코드입니다. 웹 페이지에서 마우스를 움직일 때 마우스는 마우스를 따르는 일련의 텍스트로 이동합니다.
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<스타일 유형 = "텍스트/CSS">
.spanstyle {
색상 : 000000; 글꼴 크기 : 10pt; 위치 : 절대; 상단 : -50px; 가시성 : 가시성
}
</스타일>
<cript>
var x, y
var step = 18 // 이것은 인접한 두 문자 사이의 간격입니다.
var flag = 0
var message = "wulin.com www.vevb.com 방문에 오신 것을 환영합니다!" // 여기에 표시해야 할 텍스트를 넣으십시오
message = message.split ( "") // 문자열을 배열로 분해합니다
var xpos = new array () // 각 위치의 x 코디네이트를 기록 할 배열 생성
for (i = 0; i <= message.length-1; i ++) {// 각 요소에 초기 값을 먼저 할당
xpos [i] = -50
}
var ypos = new Array () // 각 위치의 Y 좌표를 기록하는 배열 생성
for (i = 0; i <= message.length-1; i ++) {
YPOS [i] = -200
}
기능 MoveHandler (e) {// 마우스 이동 이벤트 처리
x = (document.layers)? e.pagex : document.body.scrollleft+event.clientx // 브라우저에 따라 마우스의 수평 위치를 지시합니다.
y = (document.layers)? e.pagey : document.body.scrolltop+event.clienty // 마우스의 수직 위치를 기록하십시오
flag = 1 // 마우스 위치가 변경되었으며 다시 계산해야합니다.
}
함수 makesNake () {
if (flag == 1 && document.all) {// IF IF IF입니다
for (i = message.length-1; i> = 1; i-) {// 좌표 큐 처리
xpos [i] = xpos [i-1]+step // 각 좌표 데이터 하나를 하나의 그리드를 이동하고 문자 간격을 추가합니다.
ypos [i] = ypos [i-1]
}
XPOS [0] = X+step // 코디네이션 데이터 큐의 꼬리에 새 데이터를 작성합니다.
YPOS [0] = y
for (i = 0; i <message.length-1; i ++) {
var thisspan = eval ( "span"+(i)+". style") // 현재 작동 객체 생성 객체 spanx.style
thisspan.posleft = xpos [i]
thisspan.postop = ypos [i]
}
}
else if (flag == 1 && document.layers) {// ns 인 경우
for (i = message.length-1; i> = 1; i-) {// 좌표 큐 처리
xpos [i] = xpos [i-1]+step // 각 좌표 데이터 하나를 하나의 그리드를 이동하고 문자 간격을 추가합니다.
ypos [i] = ypos [i-1]
}
XPOS [0] = X+step // 코디네이션 데이터 큐의 꼬리에 새 데이터를 작성합니다.
YPOS [0] = y
for (i = 0; i <message.length-1; i ++) {// 각 단어가 배열의 데이터에 따라 위치되는 레이어의 좌표를 변경합니다.
var thispan = val ( "document.span"+i) // 현재 작동 객체 객체를 생성합니다.
thisspan.left = xpos [i]
thisspan.top = ypos [i]
}
}
var timer = settimeout ( "makesnake ()", 30) // 30 밀리 초 후에 상황에 따라 각 문자의 위치를 다시 조정하십시오.
}
</스크립트>
</head>
<body bgcolor = "ffffff"onload = "makesnake ()">
<cript>
<!- JavaScript의 시작-
// 여기서 우리는 각 단어의 컨테이너로 스팬을 생성합니다.
for (i = 0; i <= message.length-1; i ++) {
document.write ( "<span id = 'span"+i+"'class = 'spanstyle'>")
document.write (메시지 [i])
document.write ( "</span>")
}
// 마우스 이동 이벤트 처리 프로세스를 지정합니다
if (document.layers) {
문서 .captureEvents (event.mouseMove);
}
document.onmouseMove = MoveHandler;
// - JavaScript의 끝 --->
</스크립트>
</body>
<br> <b>이 효과가 매우 멋져요? </b> </br>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.