JavaScript to move text following the mouse
This article mainly introduces how to move text following the mouse in javascript. The example shows how to use javascript to handle mouse events and text effects. For more information, see
This article describes how JavaScript moves text following the mouse. Share it with you for your reference. The specific analysis is as follows:
This is a very simple mouse feature code. When moving the mouse on a webpage, a string of text followers move the mouse
The Code is as follows:
<Html>
<Head>
<Style type = "text/css">
. Spanstyle {
COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP:-50px; VISIBILITY: visible
}
</Style>
<Script>
Var x, y
Var step = 18 // The interval between two adjacent words
Var flag = 0
Var message = "www.www.www.jb51.net welcome! "// Enter the text to be displayed.
Message = message. split ("") // splits the string into an array
Var xpos = new Array () // create an Array to record the x coordinates of each position
For (I = 0; I <= message. length-1; I ++) {// assign an initial value to each element
Xpos [I] =-50
}
Var ypos = new Array () // create an Array to record the y coordinates of each position
For (I = 0; I <= message. length-1; I ++ ){
Ypos [I] =-200
}
Function movehandler (e) {// process mouse movement events
X = (document. layers )? E. pageX: document. body. scrollLeft + event. clientX // record the horizontal position of the mouse Based on the browser
Y = (document. layers )? E. pageY: document. body. scrollTop + event. clientY // record the vertical position of the mouse
Flag = 1 // The mouse position has changed and needs to be recalculated
}
Function makesnake (){
If (flag = 1 & document. all) {// if it is IE
For (I = message. length-1; I> = 1; I --) {// process the coordinate queue
Xpos [I] = xpos [I-1] + step // move each coordinate data forward to one grid with the padding
Ypos [I] = ypos [I-1]
}
Xpos [0] = x + step // write new data to the end of the coordinate data queue
Ypos [0] = y
For (I = 0; I <message. length-1; I ++ ){
Var thisspan = eval ("span" + (I) + ". style") // generate the current operation object spanx. style
Thisspan. posLeft = xpos [I]
Thisspan. posTop = ypos [I]
}
}
Else if (flag = 1 & document. layers) {// if it is NS
For (I = message. length-1; I> = 1; I --) {// process the coordinate queue
Xpos [I] = xpos [I-1] + step // move each coordinate data forward to one grid with the padding
Ypos [I] = ypos [I-1]
}
Xpos [0] = x + step // write new data to the end of the coordinate data queue
Ypos [0] = y
For (I = 0; I <message. length-1; I ++) {// Changes the coordinates of the layer where each word is located based on the array data
Var thisspan = eval ("document. span" + I) // generate the current operation object document. spanx
Thisspan. left = xpos [I]
Thisspan. top = ypos [I]
}
}
Var timer = setTimeout ("makesnake ()", 30) // adjust the positions of each character again according to the situation after 30 milliseconds
}
</Script>
</Head>
<Body bgcolor = "ffffff" onload = "makesnake ()">
<Script>
<! -- Beginning of JavaScript-
// A span is generated for each word as a container.
For (I = 0; I <= message. length-1; I ++ ){
Document. write ("<span id = 'span" + I + "'class = 'spanstyle'> ")
Document. write (message [I])
Document. write ("</span> ")
}
// Specifies the handling process of mouse movement events
If (document. layers ){
Document. captureEvents (Event. MOUSEMOVE );
}
Document. onmousemove = movehandler;
//-End of JavaScript--->
</Script>
</Body>
<Br> <B> is the effect cool? </B> </br>
</Html>
I hope this article will help you design javascript programs.
