js method to realize text moving according to mouse movement_javascript skills

The example in this article describes how js implements text movement following mouse movement. Share it with everyone for your reference. The specific analysis is as follows:

This is a very simple mouse feature code. When you move the mouse on a web page, a string of text will follow the mouse movement

Copy code The code is as follows:

<script><br> var x,y<br> var step=18 //This is the interval between two adjacent words <br> var flag=0<br> var message="Script House www.jb51.net welcomes you!" //Put the text that needs to be displayed here<br> message=message.split("") //Split the string into an array<br> var xpos=new Array() //Create an array to record the x coordinate of each position<br> for (i=0;i<=message.length-1;i) { //Assign an initial value to each element<br /> xpos[i]=-50<br /> }<br /> var ypos=new Array() //Create an array to record the y coordinate of each position<br /> for (i=0;i<=message.length-1;i) {<br /> ypos[i]=-200<br /> }<br /> function movehandler(e){ //Handle mouse move events<br /> x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX //According to different browsers, record the horizontal position of the mouse <br /> y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY //Record the vertical position of the mouse<br /> flag=1 //The mouse position has changed and needs to be recalculated <br /> }<br /> function makesnake() {<br /> if (flag==1 && document.all) { //If it is IE<br /> for (i=message.length-1; i>=1; i--) { //Process coordinate queue<br> xpos[i]=xpos[i-1] step //Move each coordinate data forward one space and add character spacing <br> ypos[i]=ypos[i-1]<br> }<br> xpos[0]=x step //Write new data into the end of the coordinate data queue<br> ypos[0]=y<br> for (i=0; i<message.length-1; i ) {<br /> var thisspan = eval("span" (i) ".style")// Generate the current operation object spanx.style<br /> thisspan.posLeft=xpos[i]<br /> thisspan.posTop=ypos[i]<br /> }<br /> }<br /> else if (flag==1 && document.layers) { //If it is NS<br /> for (i=message.length-1; i>=1; i--) { //Process coordinate queue<br> xpos[i]=xpos[i-1] step //Move each coordinate data forward one space and add character spacing <br> ypos[i]=ypos[i-1]<br> }<br> xpos[0]=x step //Write new data into the end of the coordinate data queue<br> ypos[0]=y<br> for (i=0; i<message.length-1; i ) { //Change the coordinates of the layer where each word is located according to the data in the array <br /> var thisspan = eval("document.span" i) //Generate the current operation object document.spanx<br /> thisspan.left=xpos[i]<br /> thisspan.top=ypos[i]<br /> }<br /> }<br /> var timer=setTimeout("makesnake()",30) //After 30 milliseconds, adjust the position of each character according to the situation again<br /> }<br /> </script>


<script><br> <!-- Beginning of JavaScript -<br /> //Generate a span as a container for each word here <br /> for (i=0;i<=message.length-1;i) {<br /> document.write("<span id='span" i "' class='spanstyle'>")<br> document.write(message[i])<br> document.write("</span>")<br> }<br> //Specify the processing process of mouse movement events<br> if (document.layers){<br> document.captureEvents(Event.MOUSEMOVE);<br> }<br> document.onmousemove = movehandler;<br> // - End of JavaScript - --><br> </script>


Isn’t this effect cool?

I hope this article will be helpful to everyone’s JavaScript programming design.