JavaScript随机漂浮图片广告实例代码

在网上有很多这样的代码，不过未必符合W3C标准，因为在头部加上类似标签之后，漂浮效果就会失效，下面分享一个符合标准的漂浮代码，使需要的朋友免去大量改造代码的繁琐。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>漂浮广告代码-51前端</title>
<style type="text/css">
#thediv
{
  z-index:100;  
  position:absolute; 
  top:43px; 
  left:2px;
  height:100px;
  width:100px; 
  background-color:red;
}
</style>
<script type="text/javascript"> 
var xPos=300; 
var yPos=200; 
var step=1; 
var delay=8; 
var height=0; 
var Hoffset=0; 
var Woffset=0; 
var yon=0; 
var xon=0; 
var pause=true; 
var interval; 
function changePos() 
{ 
  width=document.documentElement.clientWidth; 
  height=document.documentElement.clientHeight; 
  Hoffset=thediv.offsetHeight; 
  Woffset=thediv.offsetWidth; 
  thediv.style.left=(xPos+document.body.scrollLeft+document.documentElement.scrollLeft)+"px"; 
  thediv.style.top=(yPos+document.body.scrollTop+document.documentElement.scrollTop)+"px"; 
  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() 
{ 
  thediv.visibility="visible"; 
  interval=setInterval('changePos()',delay); 
} 
function pause_resume() 
{ 
  if(pause) 
  { 
    clearInterval(interval); 
    pause = false;
  } 
  else 
  { 
    interval = setInterval(changePos,delay); 
    pause = true; 
  } 
}
window.onload=function()
{
  thediv.style.top=yPos; 
  start(); 
}
</script> 
</head> 
<body> 
<div id="thediv"></div> 
</body> 
</html>

代码描述：JavaScript 漂浮图片广告。JavaScript随机漂浮图片广告实例代码

下载全部收藏

148 197

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册