欢迎光临
我们一直在努力

javascript实现浮动窗口

建站超值云服务器,限时71元/月

javascript效果:
  一个不停浮动的图片,遇到浏览器的任何一边,就会改变浮动的方向,如同一个弹球一样。这种效果主要用于网站广告,代码如下,将以下代码保存为htm文件就可以运行了。

<div id="img" style="position:absolute; left:35px; top:556px; width:120; 

height:172">

<img src="injob.jpg" width=100 height=100></img>

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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » javascript实现浮动窗口
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址