Following this article, we will learn how to create the mouse-follow effect today. When you open some web pages, there is an image following the mouse, and some of the images even are dynamic. This special effect can give the web viewers a deep impression and add the viewers. You must have been interested to this funny and special effect. Surely, it is very attracting. However, can we achieve this effect in our web pages? Yes, and it is very easy. Firstly, definite a doMouseMove() function; secondly, carry out it by document.Write. Now follow me.

clip_image002

Step1

Open your web page.

Step2

Because the effect is applied to the whole page, we put the codes in to the <head> sentence. The codes are like the following blue text.

clip_image004

  1. <script LANGUAGE="JavaScript">
  2.  
  3. var newtop=0
  4. var newleft=0
  5.  
  6. if (navigator.appName == "Netscape") {
  7. layerStyleRef="layer.";
  8. layerRef="document.layers";
  9. styleSwitch="";
  10. }
  11. else
  12. {
  13. layerStyleRef="layer.style.";
  14. layerRef="document.all";
  15. styleSwitch=".style";
  16. }
  17.  
  18. function doMouseMove() {
  19. layerName = ‘iit’
  20.  
  21. eval(’var curElement=’+layerRef+’["'+layerName+'"]‘)
  22. eval(layerRef+’["'+layerName+'"]‘+styleSwitch+’.visibility="hidden"’)
  23. eval(’curElement’+styleSwitch+’.visibility="visible"’)
  24. eval(’newleft=document.body.clientWidth-curElement’+styleSwitch+’.pixelWidth’)
  25. eval(’newtop=document.body.clientHeight-curElement’+styleSwitch+’.pixelHeight’)
  26. eval(’height=curElement’+styleSwitch+’.height’)
  27. eval(’width=curElement’+styleSwitch+’.width’)
  28.  
  29. width=parseInt(width)
  30. height=parseInt(height)
  31.  
  32. if (event.clientX > (document.body.clientWidth – 5 – width))
  33. {
  34. newleft=document.body.clientWidth + document.body.scrollLeft – 5 – width
  35. }
  36. else
  37. {
  38. newleft=document.body.scrollLeft + event.clientX
  39. }
  40.  
  41. eval(’curElement’+styleSwitch+’.pixelLeft=newleft’)
  42. if (event.clientY > (document.body.clientHeight – 5 – height))
  43. {
  44. newtop=document.body.clientHeight + document.body.scrollTop – 5 – height
  45. }
  46. else
  47. {
  48. newtop=document.body.scrollTop + event.clientY
  49. }
  50.  
  51. eval(’curElement’+styleSwitch+’.pixelTop=newtop’)
  52. }
  53.  
  54. document.onmousemove = doMouseMove;
  55. </script>

You may be confused by the mass of codes. “var newtop” is to set the margin as 0. “function doMouseMove” is to definite a mouse-move function. Then there is a layer named as “iit”. And the mouse-move function is created in the layer named “iit”.

Step3

Now we need a “document.Write” sentence to carry it. Put the following codes into the <body> sentence.

clip_image006

  1. <script language="javascript">
  2. if (navigator.appName == "Netscape") {
  3. }
  4. else
  5. {
  6. document.write(’<div ID=OuterDiv>’)
  7. document.write(’<img ID=iit src="images/AP_42JJ9.png" STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=61;height=65;Z-INDEX:2;visibility:hidden;"/>’)
  8. document.write(’</div>’)
  9. }
  10. </script>

Now let us learn about these codes. “src” is to set the image that follows mouse. here you can definite by yourself. But the image must be fitted for the style of the whole page.

Step4

Go back to the design view. Save the document and press F12 to preview in the Explorer. The mouse-follow effect is like the following picture showing:

clip_image008

clip_image010

Now you can see the beautiful and attracting effect that is created by yourself. You can practice it frequently. Of course, the codes in this article are a little boring. But we just need to remember how to use the doMouseMove() function and create a layer, then carry out it.

Related Posts