快捷導(dǎo)航

js由下向上不斷上升冒氣泡效果實(shí)例

更新時(shí)間：2015年05月07日 15:41:56 投稿：shichen2014

這篇文章主要介紹了js由下向上不斷上升冒氣泡效果,實(shí)例分析了javascript操作鼠標(biāo)事件、圖片及樣式的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了js由下向上不斷上升冒氣泡效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<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中正則表達(dá)式全局匹配模式 /g用法詳解
本文章通過實(shí)例代碼給大家詳細(xì)介紹js中正則表達(dá)式的全局匹配模式 /g的用法，需要的朋友參考下
2017-04-04
D3.js入門之比例尺的使用與繪制
中國這么大，要在一張小小地圖上畫上中國，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此。本文就來和大家聊聊D3中的比例尺的繪制與使用，感興趣的可以學(xué)習(xí)一下
2022-11-11
如何從JavaScript數(shù)組中刪除空對(duì)象
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于如何從JavaScript數(shù)組中刪除空對(duì)象的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-05-05
Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
new Date()問題在ie8下面的處理方法
本節(jié)主要介紹了ie8下面處理 new Date()的問題,需要的朋友可以參考下
2014-07-07
javascript事件模型實(shí)例分析
這篇文章主要介紹了javascript事件模型用法,實(shí)例分析了事件模型、事件對(duì)象、事件監(jiān)聽器及事件傳遞的定義與使用技巧,需要的朋友可以參考下
2015-01-01
模擬windows平臺(tái)的上下文菜單效果代碼
技術(shù)上沒什么難的，就是定義一個(gè)隱藏的box，當(dāng)觸發(fā)上下文事件時(shí)顯示它，當(dāng)單擊body任意處時(shí)又隱藏它。
2011-03-03
解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法
今天小編就為大家分享一篇解決bootstrap模態(tài)框數(shù)據(jù)緩存的問題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
分享15個(gè)JavaScript的重要數(shù)組方法
這篇文章主要介紹了分享15個(gè)JavaScript的重要數(shù)組方法，數(shù)組方法的重要一點(diǎn)是有些是可變的，有些是不可變的。在決定針對(duì)特定問題使用哪種方法時(shí)，務(wù)必牢記，下文就來分享重要數(shù)組方法，需要的小伙伴可以參考一下
2022-05-05
Safari 中 filter: blur() 高斯模糊引發(fā)的性能問題及解決方案
在Safari瀏覽器中使用CSS濾鏡如filter:blur()時(shí),可能會(huì)遇到性能問題,如頁面卡頓和小方塊現(xiàn)象,這些問題通常與渲染機(jī)制和硬件加速的缺失有關(guān),通過開啟硬件加速,如使用transform:translate3d(0,0,0),可以有效解決這些問題,并提升用戶體驗(yàn)
2024-10-10