마우스 움직임에 따라 텍스트가 움직이는 것을 구현하는 js 메소드_javascript 기술

이 기사의 예에서는 js가 마우스 움직임에 따라 텍스트 움직임을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

웹 페이지에서 마우스를 움직이면 텍스트 문자열이 마우스 움직임을 따라가는 매우 간단한 마우스 기능 코드입니다

코드 복사 코드는 다음과 같습니다.

.spanstyle { 색상: 000000; 글꼴 크기: 10pt; 상단: -50px; }

변수 x,y var step=18 //인접한 두 단어 사이의 간격입니다. var 플래그=0 var message="Script House www.jb51.net 환영합니다!" //표시해야 할 텍스트를 여기에 입력하세요 message=message.split("") //문자열을 배열로 분할 var xpos=new Array() //각 위치의 x 좌표를 기록하는 배열을 생성합니다 for (i=0;i xpos[i]=-50 } var ypos=new Array() //각 위치의 y좌표를 기록하는 배열을 생성합니다 (i=0;i ypos[i]=-200 } function 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) { //IE인 경우 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 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 var thisspan = eval("document.span" i) //현재 작업 객체 생성 document.spanx thisspan.left=xpos[i] thisspan.top=ypos[i] } } var 타이머=setTimeout("makesnake()",30) //30밀리초 후 다시 상황에 따라 각 캐릭터의 위치를 조정합니다 }

//여기서 각 단어에 대한 컨테이너로 범위를 생성합니다 (i=0;i document.write(" ") document.write(메시지[i]) document.write(" ") } //마우스 움직임 이벤트 처리 과정 지정 if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = movehandler; // - 자바스크립트 끝 - -->

이 효과가 멋지지 않나요?