js浮動圖片的動態效果

這篇文章介紹了幾種JS的動態效果實例有需要的朋友可以參考一下復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD HTML Transitional//EN" "
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF">
<title>浮動圖片</title>
<script type="text/javascript">
var step = ; // 移動的像素
var y = ; // 垂直移動的方向表示向上表示向下
var x = ; // 水平移動的方向表示向左表示向右
function myFloat()
{
var img = documentgetElementById("myImg");
// 獲取圖片和當前浏覽器窗口上邊距由於imgstyletop獲取的值帶px單位
var top = imgstyletopreplace("px" "");
// top = top ;
// imgstyletop = top + "px";
// 獲取圖片和當前浏覽器窗口左邊距
var left = imgstyleleftreplace("px" "");
// left = left ;
// imgstyleleft = left + "px";
// 上下移動
if(top <= )
{
y = ;
}
if(top >= documentbodyclientHeight)
{
y = ;
}
top = (top*) + (step * y);
imgstyletop = top + "px";
// 左右移動
if(left <= )
{
x = ;
}
// alert(imgclientWidth);
if(left >= (documentbodyclientWidth imgclientWidth))
{
x = ;
}
left = (left*) + (step * x);
imgstyleleft = left + "px";
setTimeout("myFloat()" );
}
</script>
</head>
<body onload="myFloat();" style="height: px;">
<img id="myImg" src="
style="position: absolute; left: px; top: px; border: solid px black;" />
</body>
</html>

　　
另一種的實現方式

復制代碼代碼如下:
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=gb" />
<title>浮動廣告實例</title>
<script type="text/javascript">
    var pos = ;
    function toueme() {
        documentgetElementById("toubiao")styledisplay = "none";
    }
    function initArray() {
        thislength = initArrayargumentslength;
        for (var i = ; i < thislength; i++) {
            this[i] = initArrayarguments[i];
        }
    }
    var col = new initArray("b" "b" "b" "b");
    col[] = "yellow";
    col[] = "coral";
    col[] = "orange";
    col[] = "red";
    col[] = "greenyellow";
    col[] = "lime";
    col[] = "turquoise";
    col[] = "coral";
    col[] = "blueviolet";
    col[] = "violet";
    function chgCol() {
        pos++;
        if (pos < || pos > ) {
            pos = ;
        }
        documentbgColor = col[pos];
        setTimeout("chgCol()" );
    }
</script>
</head>
<body bgColor="#ffffff" onload="chgCol();pingpong();">
<DIV id=img
     style="ZINDEX: ;
     LEFT: px;
     WIDTH: px;
     POSITION: absolute;
     TOP: px;
     HEIGHT: px;
visibility: visible;">
<div id=toubiao>
     <a style="CURSOR: hand" onClick=toueme()>
    <img
      src="closegif"
      width= height= hspace="" border=></a>
</div>
<a href="#" target="_blank">
<img src="jpg" width="" height="" border="">
</a>
</DIV>
<SCRIPT>
var xPos = ;
var yPos = ;
var step = ;
var delay = ;
var height = ;
var Hoffset = ;
var Woffset = ;
var yon = ;
var xon = ;
var pause = true;
var interval;
imgstyletop = yPos;
function changePos()
{
    width = documentbodyclientWidth; //獲取浏覽器的寬度
    height = documentbodyclientHeight; //獲取浏覽器的高度
Hoffset = imgoffsetHeight;
Woffset = imgoffsetWidth;
imgstyleleft = xPos + documentbodyscrollLeft;
imgstyletop = yPos + documentbodyscrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos step;}
if (yPos < )
{yon = ;yPos = ;}
if (yPos >= (height Hoffset))
{yon = ;yPos = (height Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos step;}
if (xPos < )
{xon = ;xPos = ;}
if (xPos >= (width Woffset))
{xon = ;xPos = (width Woffset);   }
}
function start()
{
imgvisibility = "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:; padding:; position:absolute; overflow:hidden; background:#FFF; left:; top:; width:%; height:%;}
</style>
<script type="text/javascript">
var object = new Array();
nbfm   = ;
var xm = ;
var ym = ;
var nx = ;
var ny = ;
function movbulb(){
with (this) {
if(ec < ){
   if(Mathabs(x xm) < && Mathabs(y ym) < ){
    xx = (xm x) / ;
    yy = (ym y) / ;
    ec++;
   }
}
xx *= ;
yy *= ;
x = Mathround(x + Mathcos(y / ) * p) + xx;
y+= yy v;
if(y < h * || x < w * || x > nx + w * ){
   y = ny + N + h * ;
   x = nx/ + Mathrandom() * ;
   ec = ;
}
objstyletop = y h;
objstyleleft = x w;
}
}
function CObj(Nimgwh){
thisobj = documentcreateElement("img");
thisobjsrc = imgsrc;
thisobjstyleposition = "absolute";
thisobjstyleleft = ;
documentbodyappendChild(thisobj);
thisN = N;
thisx = ;
thisy = ;
thisv = + Mathround(( / h) * Mathrandom());
thisp = + Mathround((w / ) * Mathrandom());
thisxx = ;
thisyy = ;
thisec = ;
thisw = w;
thish = h;
thismovbulb = movbulb;
}
function resize(){
nx = documentbodyoffsetWidth;
ny = documentbodyoffsetHeight;
}
onresize = resize;
documentonmousemove = function(e){
if (windowevent) e = windowevent;
xm = documentbodyscrollLeft+(ex || eclientX);
ym = documentbodyscrollTop+(ey || eclientY);
}
function run(){
for(i in object)object[i]movbulb();
setTimeout(run );
}
onload = function() {
PIC = documentgetElementById("bubbles")getElementsByTagName("img");
resize();
for(nbf=;nbf<nbfm;nbf++){
sf = PIC[nbf%PIClength];
object[nbf] = new CObj(nbfsfsfwidth/sfheight/);
}
run();
}
</script>
</head>
<body>
<div id="bubbles" style="visibility:hidden">
<img src="smilegif">
<img src="biggringif">
<img src="eekgif">
<img src="rolleyesgif">
</div>
</body>
</html>

　　
浮動廣告

復制代碼代碼如下:

　　
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF">
<title>浮動廣告</title>
</head>
<body style="backgroundcolor:pink">
<div id="ad" style="position:absolute">
<a href=http://wwwbaiducom target="_blank">
<img src="gif" border="" width="" heigth="">
<input type="button" value="關閉窗口" onclick="closeWindow()"/><! 適用於IE浏覽器 >
</a>
</div>
<script type="text/javascript">
var x = y =
var xin = true yin = true
var step =
var delay =
var obj=documentgetElementById("ad")
function floatAD()
{
var L=T=
var R= documentbodyclientWidthobjoffsetWidth
var B = documentbodyclientHeightobjoffsetHeight
objstyleleft = x + documentbodyscrollLeft
objstyletop = y + documentbodyscrollTop
x = x + step*(xin?:)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?:)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()" delay)
function closeWindow()
{
                      windowclose();
                   }
</script>
<style type="text/css">
input{
   backgroundimage:url(jpg);
   border:px;
   margin:px;
   padding:px;
   height:px;
   width:px;
   fontsize:px;
}
</style>
</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20253.html