js实现精美的图片跟随鼠标效果实例

这篇文章主要介绍了js实现精美的图片跟随鼠标效果,实例分析了javascript鼠标事件及页面样式的操作技巧,需要的朋友可以参考下

本文实例讲述了js实现精美的图片跟随鼠标效果实现方法。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
4. <title>精美js鼠标跟随代码</title> 
5. </head> 
6. <body> 
7. <script>  
8. A=document.getElementById 
9. B=document.all; 
10. C=document.layers; 
11. T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10) 
12. var offsetx=15  
13. var offsety=10 
14. nos=parseInt(T1.length/3) 
15. rate=50 
16. ie5fix1=0; 
17. ie5fix2=0; 
18. rightedge=B? document.body.clientWidth-T1[1] : window.innerWidth-T1[1]-20 
19. bottomedge=B? document.body.scrollTop+document.body.clientHeight-T1[2] : window.pageYOffset+window.innerHeight-T1[2] 
20. for (i=0;i<nos;i++){ 
21. createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+"border=0>") 
22. } 
23. function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){ 
24. with (document){ 
25. write((!A && !B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+"style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; "); 
26. if(St){ 
27. if (C) 
28. write(" style='"); 
29. write(St+";' ") 
30. } 
31. else write((A || B)?"'":""); 
32. write((At)? At+">" : ">"); 
33. write((HT) ? HT : ""); 
34. if (!Op) 
35. closeContainer(N) 
36. } 
37. } 
38. function closeContainer(){ 
39. document.write((A || B)?"</div>":"</layer>") 
40. } 
41. function getXpos(N){ 
42. if (A) 
43. return parseInt(document.getElementById(N).style.left) 
44. else if (B) 
45. return parseInt(B[N].style.left) 
46. else 
47. return C[N].left 
48. } 
49. function getYpos(N){ 
50. if (A) 
51. return parseInt(document.getElementById(N).style.top) 
52. else if (B) 
53. return parseInt(B[N].style.top) 
54. else 
55. return C[N].top 
56. } 
57. function moveContainer(N,DX,DY){ 
58. c=(A)? document.getElementById(N).style : (B)? B[N].style : (C)? C[N] : ""; 
59. if (!B){ 
60. rightedge=window.innerWidth-T1[1]-20 
61. bottomedge=window.pageYOffset+window.innerHeight-T1[2] 
62. } 
63. c.left=Math.min(rightedge, DX+offsetx); 
64. c.top=Math.min(bottomedge, DY+offsety); 
65. } 
66. function cycle(){ 
67. //if (IE5)  
68. if (document.all&&window.print){ 
69. ie5fix1=document.body.scrollLeft; 
70. ie5fix2=document.body.scrollTop; 
71. } 
72. for (i=0;i<(nos-1);i++){ 
73. moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1))) 
74. } 
75. } 
76. function newPos(e){ 
77. moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2) 
78. } 
79. function getedgesIE(){ 
80. rightedge=document.body.clientWidth-T1[1] 
81. bottomedge=document.body.scrollHeight-T1[2] 
82. } 
83. if (B){ 
84. window.onload=getedgesIE 
85. window.onresize=getedgesIE 
86. } 
87. if(document.layers) 
88. document.captureEvents(Event.MOUSEMOVE) 
89. document.onmousemove=newPos 
90. setInterval("cycle()",rate) 
91. </script> 
92. </body> 
93. </html> 

希望本文所述对大家的javascript程序设计有所帮助。