<html>
<head>
<title>JS实现气泡从水中急速上升效果</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>
<img src="https://www.jb51.net/smile.gif">
<img src="https://www.jb51.net/biggrin.gif">
<img src="https://www.jb51.net/eek.gif">
<img src="https://www.jb51.net/rolleyes.gif">
</div>
</body>
</html>
浮动广告
复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮动广告</title>
</head>
<body>
<div>
<a href=https://www.baidu.com target="_blank">
<img src="https://www.jb51.net/article/2.gif" heigth="80">
<input type="button" value="关闭窗口"/><!-- 适用于IE浏览器 -->
</a>
</div>
<script type="text/javascript">
var x = 400,y = 300
var xin = true, yin = true
var step = 1
var delay = 25
var obj=document.getElementById("ad")
function floatAD()
{
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()", delay)
function closeWindow()
{
window.close();
}
</script>
<style type="text/css">
input{
background-image:url(638.jpg);
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
</style>
</body>
</html>
您可能感兴趣的文章: