js由下向上不断上升冒气泡效果实例

这篇文章主要介绍了js由下向上不断上升冒气泡效果,实例分析了javascript操作鼠标事件、图片及样式的相关技巧,需要的朋友可以参考下

本文实例讲述了js由下向上不断上升冒气泡效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <html> 
2. <head> 
3. <title>JS实现气泡从水中急速上升效果</title> 
4. <style type="text/css"> 
5. body { 
6. cursor:crosshair;margin:0; padding:0; 
7. position:absolute; overflow:hidden; 
8. background:#FFF; left:0; top:0; 
9. width:100%; height:100%; 
10. } 
11. </style> 
12. <script type="text/javascript"> 
13. var object = new Array(); 
14. nbfm = 60; 
15. var xm = 0; 
16. var ym = 9999; 
17. var nx = 0; 
18. var ny = 0; 
19. function movbulb(){ 
20. with (this) { 
21. if(ec < 20){ 
22. if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){ 
23. xx = (xm - x0) / 8; 
24. yy = (ym - y0) / 8; 
25. ec++; 
26. } 
27. } 
28. xx *= 0.99; 
29. yy *= 0.99; 
30. x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx; 
31. y0+= yy - v; 
32. if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){ 
33. y0 = ny + N + h * 2; 
34. x0 = nx/2-100 + Math.random() * 100; 
35. ec = 0; 
36. } 
37. obj.style.top = y0 - h; 
38. obj.style.left = x0 - w; 
39. } 
40. } 
41. function CObj(N,img,w,h){ 
42. this.obj = document.createElement("img"); 
43. this.obj.src = img.src; 
44. this.obj.style.position = "absolute"; 
45. this.obj.style.left = -1000; 
46. document.body.appendChild(this.obj); 
47. this.N = N; 
48. this.x0 = 0; 
49. this.y0 = -1000; 
50. this.v = 1 + Math.round((80 / h) * Math.random()); 
51. this.p = 1 + Math.round((w / 8) * Math.random()); 
52. this.xx = 0; 
53. this.yy = 0; 
54. this.ec = 0; 
55. this.w = w; 
56. this.h = h; 
57. this.movbulb = movbulb; 
58. } 
59. function resize(){ 
60. nx = document.body.offsetWidth; 
61. ny = document.body.offsetHeight; 
62. } 
63. onresize = resize; 
64. document.onmousemove = function(e){ 
65. if (window.event) e = window.event; 
66. xm = document.body.scrollLeft+(e.x || e.clientX); 
67. ym = document.body.scrollTop+(e.y || e.clientY); 
68. } 
69. function run(){ 
70. for(i in object)object[i].movbulb(); 
71. setTimeout(run, 16); 
72. } 
73. onload = function() { 
74. PIC = document.getElementById("bubbles").getElementsByTagName("img"); 
75. resize(); 
76. for(nbf=0;nbf<nbfm;nbf++){ 
77. sf = PIC[nbf%PIC.length]; 
78. object[nbf] = new CObj(nbf,sf,sf.width/2,sf.height/2); 
79. } 
80. run(); 
81. } 
82. </script> 
83. </head> 
84. <body> 
85. <div id="bubbles" style="visibility:hidden"> 
86. <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/smile.gif"> 
87. <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/biggrin.gif"> 
88. <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/eek.gif"> 
89. <img src="http://bbs.blueidea.com/static/image/smiley/blueidea/rolleyes.gif"> 
90. </div> 
91. </body> 
92. </html> 

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