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