Javascript-javascript tutorial

This article describes how to move text following the mouse in javascript. The example shows how to handle mouse events and special effects in javascript, for more information, see the following example. 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:

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 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 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


Script

Script


Is this effect cool?

I hope this article will help you design javascript programs.