js漂浮广告代码演示

发布时间:2019-08-08编辑:脚本学堂
本文介绍了js漂浮广告代码的例子,用js实现图片广告的漂浮滚动,js实现漂浮广告的方法,有需要的朋友参考下。

1,html部分
 

复制代码 代码示例:
<html>
<head>
</head>
<body>
<div id="img" style="position:absolute;; width: 200; height: 151"><img src="01.jpg" border="0"></div>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</body>
</html>

2,js代码(js漂浮广告代码)
 

复制代码 代码示例:
<script language="javascript">
var xpos = 20;
var ypos = 10;
img.style.left= xpos;
img.style.top = ypos;
var step = 1;
var delay = 30;
var width,height,hoffset,woffset;
var y = 1;
var x = 1;
var interval;
img.visibility = "visible";
function changepos()
{
  width = document.body.clientwidth;
  height = document.body.clientheight;
  hoffset = img.offsetheight;
  woffset = img.offsetwidth;
  if (y)
  {
    ypos = ypos + step;
  }
  else
  {
    ypos = ypos - step;
  }
  if (ypos < 0)
  {
    y = 1;
    ypos = 0;
  }
  if (ypos >= (height - hoffset))
  {
    y = 0;
    ypos = (height - hoffset);
  }
  if (x)
  {
    xpos = xpos + step;
  }
  else
  {
    xpos = xpos - step;
  }
  if (xpos < 0)
  {
    x = 1;
    xpos = 0;
  }
  if (xpos >= (width - woffset))
  {
    x = 0;
    xpos = (width - woffset);
  }
  img.style.left = xpos + document.body.scrollleft;
  img.style.top = ypos + document.body.scrolltop;
}
function start()
{
  interval = setinterval('changepos()', delay);
}
function pause_resume()
{
    clearinterval(interval);
}
start();
</script>
</body>
</html>