js浮动图片的动态效果

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

　　<html>

　　<head>

　　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>

　　<img id="myImg" src="http://files.glzy8.com/file_images/article/201307/2013071009420928.png"

　　style="position: absolute; left: 500px; top: 400px; border: solid 1px black;" />

　　</body>

　　</html>

　　另一种的实现方式

复制代码代码如下:

　　<html>

　　<head>

　　<title>浮动广告实例</title>

　　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>

　　<DIV id=img1

　　style="Z-INDEX: 100;

　　LEFT: 12px;

　　WIDTH: 159px;

　　POSITION: absolute;

　　TOP: 143px;

　　HEIGHT: 161px;

　　visibility: visible;">

　　<img

　　src="close.gif"

　　width=84 height=11 hspace="6" border=0></a>

　　</div>

　　</a>

　　</DIV>

　　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>

　　body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; left:0; top:0; width:100%; height:100%;}

　　</style>

　　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>

　　</body>

　　</html>

　　浮动广告

复制代码代码如下:

　　<html>

　　<head>

　　</head>

　　</a>

　　</div>

　　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>

　　input{

　　background-image:url(638.jpg);

　　border:0px;

　　margin:0px;

　　padding:0px;

　　height:23px;

　　width:82px;

　　font-size:14px;

　　}

　　</style>

　　</body>

　　</html>

教程首页更多教程