JavaScript实现鼠标滑过处生成气泡的方法

这篇文章主要介绍了JavaScript实现鼠标滑过处生成气泡的方法,涉及鼠标事件与页面样式的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法。分享给大家供大家参考。具体实现方法如下：

1. <HTML> 
2. <HEAD> 
3. <title>鼠标周围在网页上生成气泡</title> 
4. </HEAD> 
5. <BODY bgColor=#000000 scroll=no onload=zyva()> 
6. <div id=aqua style="position:absolute;left=0;top=0;"></div> 
7. <IMG id=B src="b1.gif" style="display:none"> 
8. <SCRIPT> 
9. object = new Array() 
10. var xm,ym 
11. function CObj(N,obj){ 
12. aqua.insertAdjacentHTML("AfterBegin","<img style='position:absolute;left:-1000;' src='"+obj.src+"'>") 
13. this.img = aqua.firstChild.style 
14. mr = Math.random() 
15. this.v = 6*mr+4 
16. this.s = .5*mr 
17. this.p = .1+mr 
18. this.w = 0 
19. this.k = 0 
20. this.x = xm 
21. this.y = N 
22. this.ChteuMeulEu = function ChteuMeulEu(){ 
23. with(this){ 
24. with(img){ 
25. left = (x+=0.5*v*Math.sin(k+=s))-w*0.5 
26. top = y-=v 
27. width = Math.min(w+=p,100) 
28. } 
29. if(y<-w){ 
30. w = 8 
31. y = ym 
32. x = xm 
33. } 
34. } 
35. } 
36. } 
37. function gradient(R,G,B,m){ 
38. for(i=0;i<25;i++){ 
39. c = 255 - 10 * i 
40. C = "/"RGB("+Math.round(c*R/255)+","+Math.round(c*G/255)+","+Math.round(c*B/255)+")/"" 
41. code = "<span style='position:absolute;font-size:1pt;left=0;width=120%;height="+(m)+".2%;top="+(i*m) 
42. +"%;background="+C+";z-Index:-1000'></span>" 
43. document.body.insertAdjacentHTML("beforeEnd",code) 
44. } 
45. } 
46. function zyva(){ 
47. xm = document.body.offsetWidth * 0.5 
48. ym = document.body.offsetHeight 
49. document.onmousemove = function (){ 
50. xm = window.event.clientX 
51. ym = window.event.clientY 
52. } 
53. for(i=0;i<60;i++)object[i] = new CObj(i,B) 
54. setInterval("for(i in object)object[i].ChteuMeulEu()",16) 
55. gradient(41,93,214,2) 
56. } 
57. </SCRIPT> 
58. </BODY> 
59. </HTML> 

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