隨機漂浮圖片廣告例項程式碼

antzone發表於2017-03-12
隨機

在網上有很多這樣的程式碼，不過未必符合W3C標準，因為在頭部加上<!DOCTYPE html>類似標籤之後，漂浮效果就會失效，下面分享一個符合標準的漂浮程式碼，使需要的朋友免去大量改造程式碼的繁瑣。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>漂浮廣告程式碼-螞蟻部落</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>

相關文章