你的位置:首页 > Java教程

[Java教程]随机漂浮图片广告实例代码

随机漂浮图片广告实例代码:
在网上有很多这样的代码,不过未必符合W3C标准,因为在头部加上<!DOCTYPE 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> 

 

以上代码实现了我们的要求,红色div块能够能够在网页中随机漂浮,并且兼容各个浏览器。
代码的实现过程这里就不多介绍了,如有任何问题可以跟帖留言。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9036

更多内容可以参阅:http://www.softwhy.com/javascript/