<html>
<head>
<title>JS實(shí)現(xiàn)氣泡從水中急速上升效果</title>
<style type="text/css">
body {
cursor:crosshair;margin:0; padding:0;
position:absolute; overflow:hidden;
background:#FFF; left:0; top:0;
width:100%; height:100%;
}
</style>
<script type="text/javascript">
var object = new Array();
nbfm  = 60;
var xm = 0;
var ym = 9999;
var nx = 0;
var ny = 0;
function movbulb(){
 with (this) {
 if(ec < 20){
  if(Math.abs(x0 - xm) < 100 && Math.abs(y0 - ym) < 100){
  xx = (xm - x0) / 8;
  yy = (ym - y0) / 8;
  ec++;
  }
 }
 xx *= 0.99;
 yy *= 0.99;
 x0 = Math.round(x0 + Math.cos(y0 / 15) * p) + xx;
 y0+= yy - v;
 if(y0 < -h * 2 || x0 < -w * 2 || x0 > nx + w * 2){
  y0 = ny + N + h * 2;
  x0 = nx/2-100 + Math.random() * 100;
  ec = 0;
 }
 obj.style.top = y0 - h;
 obj.style.left = x0 - w;
 }
}
function CObj(N,img,w,h){
 this.obj = document.createElement("img");
 this.obj.src = img.src;
 this.obj.style.position = "absolute";
 this.obj.style.left = -1000;
 document.body.appendChild(this.obj);
 this.N = N;
 this.x0 = 0;
 this.y0 = -1000;
 this.v = 1 + Math.round((80 / h) * Math.random());
 this.p = 1 + Math.round((w / 8) * Math.random());
 this.xx = 0;
 this.yy = 0;
 this.ec = 0;
 this.w = w;
 this.h = h;
 this.movbulb = movbulb;
}
function resize(){
 nx = document.body.offsetWidth;
 ny = document.body.offsetHeight;
}
onresize = resize;
document.onmousemove = function(e){
 if (window.event) e = window.event;
 xm = document.body.scrollLeft+(e.x || e.clientX);
 ym = document.body.scrollTop+(e.y || e.clientY);
}
function run(){
 for(i in object)object[i].movbulb();
 setTimeout(run, 16);
}
onload = function() {
 PIC = document.getElementById("bubbles").getElementsByTagName("img");
 resize();
 for(nbf=0;nbf<nbfm;nbf++){
 sf = PIC[nbf%PIC.length];
 object[nbf] = new CObj(nbf,sf,sf.width/2,sf.height/2);
 }
 run();
}
</script>
</head>
<body>
<div id="bubbles" style="visibility:hidden">
<img src="http://bbs.blueidea.com/static/image/smiley/blueidea/smile.gif">
<img src="http://bbs.blueidea.com/static/image/smiley/blueidea/biggrin.gif">
<img src="http://bbs.blueidea.com/static/image/smiley/blueidea/eek.gif">
<img src="http://bbs.blueidea.com/static/image/smiley/blueidea/rolleyes.gif">
</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js獲取標(biāo)簽元素data-*屬性值的4種方法
這篇文章主要分享了js獲取標(biāo)簽元素data-*屬性值的4種方法，標(biāo)簽上有兩個(gè)屬性??data-id????和???data-user-name??,?需要通過(guò)js去獲取，下面文章具體介紹需要的小伙伴可以參考一下
2022-06-06
深入理解JavaScript中async/await的錯(cuò)誤處理方式
在現(xiàn)代JavaScript開(kāi)發(fā)中,異步編程是不可或缺的一部分,async和await是一種強(qiáng)大的異步編程工具,它們使得編寫(xiě)和維護(hù)異步代碼更加容易和清晰,然而,異步操作仍然可能會(huì)出現(xiàn)錯(cuò)誤,本文將深入探討async和await的錯(cuò)誤處理方式,提供詳細(xì)的代碼示例和解釋
2023-09-09
JS實(shí)現(xiàn)unicode和UTF-8之間的互相轉(zhuǎn)換互轉(zhuǎn)
需要將PC送過(guò)來(lái)的UTF-8轉(zhuǎn)換成UNICODE才能將內(nèi)容通過(guò)短信發(fā)送出去，同樣，接收到的短信為unicode編碼，也許轉(zhuǎn)換成UTF-8才能在PC端軟件顯示出來(lái)
2017-07-07
用javascript獲取textarea中的光標(biāo)位置
Javascript一向以他的靈活隨意而著稱(chēng)，這也使得它的功能可以非常的強(qiáng)大，而由于沒(méi)有比較好的調(diào)試工具，又使得它使用起來(lái)困難重重，尤其使對(duì)于一些初學(xué)者，更是感覺(jué)到無(wú)從下手。今天探討的問(wèn)題是用javascript獲取textarea中光標(biāo)的位置。
2008-05-05
如何在微信小程序中實(shí)現(xiàn)Mixins方案
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實(shí)現(xiàn)Mixins方案的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
js調(diào)用AJAX時(shí)Get和post的亂碼解決方法
在使用"get"時(shí)，抓取的頁(yè)面最后加上編碼類(lèi)型，在使用post時(shí)用vbscript解決了編碼問(wèn)題，具體實(shí)現(xiàn)如下，有類(lèi)似情況的朋友可以參考下哈
2013-06-06
讓IE8瀏覽器支持function.bind()方法
function.bind()方法默認(rèn)IE8是不支持的，下面有個(gè)小技巧可完美解決這個(gè)問(wèn)題，為此疑惑的朋友可以看看
2014-10-10
Javascript的getYear、getFullYear、getUTCFullYear異同分享
getYear、getFullYear、getUTCFullYear都是Javascript的Date對(duì)象的方法函數(shù)
2011-11-11
JS利用原生canvas實(shí)現(xiàn)圖形標(biāo)注功能
這篇文章主要為大家詳細(xì)介紹了JS如何利用原生canvas實(shí)現(xiàn)圖形標(biāo)注功能,支持矩形、多邊形、線段、圓形等已繪制的圖形進(jìn)行縮放,移動(dòng),需要的可以參考下
2024-03-03
基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤(pán)的按鍵值
這篇文章主要介紹了基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤(pán)的按鍵值,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02