js浮动图片的动态效果_Javascript教程-查字典教程网

摘要：复制代码代码如下:浮动图片varstep=1;//移动的像素vary=-1;//垂直移动的方向，-1表示向上，1表示向下varx=1;//水...

复制代码代码如下:

<!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.jb51.net/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

<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>

<body>

</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>