這篇文章主要介紹了js由下向上不斷上升冒氣泡效果,實例分析了javascript操作鼠標事件、圖片及樣式的相關技巧,需要的朋友可以參考下
本文實例講述了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="">
<img src="">
<img src="">
<img src="">
</div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
更多信息請查看IT技術(shù)專欄
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試