js浮动图片的动态效果

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>浮动图片</title>
 
<script type="text/javascript">
 
var step = 1; // 移动的像素
 
var y = -1; // 垂直移动的方向，-1表示向上，1表示向下
 
var x = 1; // 水平移动的方向，-1表示向左，1表示向右
 
function myFloat()
 
{
 
var img = document.getElementById("myImg");
 
// 获取图片和当前浏览器窗口上边距，由于img.style.top获取的值带px单位
 
var top = img.style.top.replace("px", "");
 
// top = top - 100;
 
// img.style.top = top + "px";
 
// 获取图片和当前浏览器窗口左边距
 
var left = img.style.left.replace("px", "");
 
// left = left - 100;
 
// img.style.left = left + "px";
 
// 上下移动
 
if(top <= 0)
 
{
 
y = 1;
 
}
 
if(top >= document.body.clientHeight)
 
{
 
y = -1;
 
}
 
top = (top*1) + (step * y);
 
img.style.top = top + "px";
 
// 左右移动
 
if(left <= 0)
 
{
 
x = 1;
 
}
 
// alert(img.clientWidth);
 
if(left >= (document.body.clientWidth - img.clientWidth))
 
{
 
x = -1;
 
}
 
left = (left*1) + (step * x);
 
img.style.left = left + "px";
 
setTimeout("myFloat()", 20);
 
}
 
</script>
 
</head>
 
<body onload="myFloat();" style="height: 400px;">
 
<img id="myImg" src="//img.jbzj.com/file_images/article/201307/2013071009420928.png"
 
style="position: absolute; left: 500px; top: 400px; border: solid 1px black;" />
 
</body>
 
</html>

另一种的实现方式

复制代码代码如下:

 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 
<title>浮动广告实例</title>
 
<script type="text/javascript">
 
    var pos = 10;
 
    function toueme() {
 
        document.getElementById("toubiao").style.display = "none";
 
    }
 
    function initArray() {
 
        this.length = initArray.arguments.length;
 
        for (var i = 0; i < this.length; i++) {
 
            this[i] = initArray.arguments[i];
 
        }
 
    }
 
    var col = new initArray("4b", "5b", "8b", "8b");
 
    col[0] = "yellow";
 
    col[1] = "coral";
 
    col[2] = "orange";
 
    col[3] = "red";
 
    col[4] = "greenyellow";
 
    col[5] = "lime";
 
    col[6] = "turquoise";
 
    col[7] = "coral";
 
    col[8] = "blueviolet";
 
    col[9] = "violet";
 
    function chgCol() {
 
        pos++;
 
        if (pos < 0 || pos > 9) {
 
            pos = 0;
 
        }
 
        document.bgColor = col[pos];
 
        setTimeout("chgCol()", 500);
 
    }
 
</script>
 
</head>
 
<body bgColor="#ffffff" onload="chgCol();pingpong();">
 
<DIV id=img1
 
     style="Z-INDEX: 100;
 
     LEFT: 12px;
 
     WIDTH: 159px;
 
     POSITION: absolute;
 
     TOP: 143px;
 
     HEIGHT: 161px;
 
 visibility: visible;">
 
 <div id=toubiao>
 
     <a style="CURSOR: hand" onClick=toueme()>
 
    <img
 
      src="close.gif"
 
      width=84 height=11 hspace="6" border=0></a>
 
 </div>
 
 <a href="#" target="_blank">
 
 <img src="1.jpg" width="280" height="280" border="0">
 
 </a>
 
 </DIV>
 
<SCRIPT>
 
var xPos = 0;
 
var yPos = 0;
 
var step = 3;
 
var delay = 100;
 
var height = 0;
 
var Hoffset = 0;
 
var Woffset = 0;
 
var yon = 0;
 
var xon = 0;
 
var pause = true;
 
var interval;
 
img1.style.top = yPos;
 
function changePos()
 
{
 
    width = document.body.clientWidth; //获取浏览器的宽度
 
    height = document.body.clientHeight; //获取浏览器的高度
 
Hoffset = img1.offsetHeight;
 
Woffset = img1.offsetWidth;
 
img1.style.left = xPos + document.body.scrollLeft;
 
img1.style.top = yPos + document.body.scrollTop;
 
if (yon)
 
{yPos = yPos + step;}
 
else
 
{yPos = yPos - step;}
 
if (yPos < 0)
 
{yon = 1;yPos = 0;}
 
if (yPos >= (height - Hoffset))
 
{yon = 0;yPos = (height - Hoffset);}
 
if (xon)
 
{xPos = xPos + step;}
 
else
 
{xPos = xPos - step;}
 
if (xPos < 0)
 
{xon = 1;xPos = 0;}
 
if (xPos >= (width - Woffset))
 
{xon = 0;xPos = (width - Woffset);   }
 
}
 
function start()
 
{
 
img1.visibility = "visible";
 
interval = setInterval('changePos()', delay);
 
//interval = setTimeout("changePos()", delay);
 
}
 
function pause_resume()
 
{
 
if(pause)
 
{
 
clearInterval(interval);
 
pause = false;}
 
else
 
{
 
interval = setInterval('changePos()',delay);
 
pause = true;
 
}
 
}
 
start();
 
</SCRIPT>
 
</body>
 
</html>

JS实现气泡从水中急速上升效果

复制代码代码如下:

 
<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 id="bubbles" style="visibility:hidden">
 
 <img src="smile.gif">
 
 <img src="biggrin.gif">
 
 <img src="eek.gif">
 
 <img src="rolleyes.gif">
 
</div>
 
</body>
 
</html>

浮动广告

复制代码代码如下:

 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
<title>浮动广告</title>
 
</head>
 
<body style="background-color:pink">
 
<div id="ad" style="position:absolute">
 
<a href=http://www.baidu.com target="_blank">
 
<img src="2.gif" border="0" width="120" heigth="80">
 
<input type="button" value="关闭窗口" onclick="closeWindow()"/><!-- 适用于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>

频道导航

js浮动图片的动态效果

您可能感兴趣的文章: