JavaScript制作会反弹的浮动图片

王朝html/css/js·作者佚名  2008-05-20
宽屏版  字体: |||超大  

现在网上流行会弹来弹去的浮动图片。想给自己的网页也加上一个吗?其实很简单,把下面这段代码加到网页的之间,然后,把图片换成你中意的就OK啦!

到这里下载示例代码

< div id="img" style="position:absolute;">

< a href="http://www.eschool.com.cn" target="_blank">

< img src="eschool-button.gif" >

< /a>

< /div>

< SCRIPT LANGUAGE="JavaScript">

< !-- Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img.style.top = yPos;

function changePos() {

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img.offsetHeight;

Woffset = img.offsetWidth;

img.style.left = xPos + document.body.scrollLeft;

img.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() {

img.visibility = "visible";

interval = setInterval(´changePos()´, delay);

}

start();

// End -- >

< /script >

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有