分类: H5/JS/CSS

多个漂浮广告图片代码--兼容ie、firefox，多个漂浮不冲突

[ 2009-07-16 16:26:51 | 作者: admin ]
字号: 大 | 中 | 小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>wahaha</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<script type="text/javascript">
<!--
//公共脚本文件 main.js
function addEvent(obj,evtType,func,cap){
        cap=cap||false;
if(obj.addEventListener){
          obj.addEventListener(evtType,func,cap);
      return true;
}else if(obj.attachEvent){
               if(cap){
                 obj.setCapture();
                 return true;
          }else{
            return obj.attachEvent("on" + evtType,func);
      }
}else{
      return false;
        }
}
function getPageScroll(){
        var xScroll,yScroll;
if (self.pageXOffset) {
      xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollLeft){
      xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
      xScroll = document.body.scrollLeft;
}
if (self.pageYOffset) {
      yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
      yScroll = document.documentElement.scrollTop;
} else if (document.body) {
      yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
}
function GetPageSize(){
        var xScroll, yScroll;
        if (window.innerHeight && window.scrollMaxY) {
               xScroll = document.body.scrollWidth;
               yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight){
               xScroll = document.body.scrollWidth;
               yScroll = document.body.scrollHeight;
        } else {
               xScroll = document.body.offsetWidth;
               yScroll = document.body.offsetHeight;
        }
        var windowWidth, windowHeight;
        if (self.innerHeight) {
               windowWidth = self.innerWidth;
               windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) {
               windowWidth = document.documentElement.clientWidth;
               windowHeight = document.documentElement.clientHeight;
        } else if (document.body) {
               windowWidth = document.body.clientWidth;
               windowHeight = document.body.clientHeight;
        }
        if(yScroll < windowHeight){
               pageHeight = windowHeight;
        } else {
               pageHeight = yScroll;
        }
        if(xScroll < windowWidth){
               pageWidth = windowWidth;
        } else {
               pageWidth = xScroll;
        }
        arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
        return arrayPageSize;
}
//广告脚本文件 AdMove.js
/*
例子
<div id="Div2">
        ***** content ******
</div>
var ad=new AdMove("Div2");
ad.Run();
*/
////////////////////////////////////////////////////////
var AdMoveConfig=new Object();
AdMoveConfig.IsInitialized=false;
AdMoveConfig.ScrollX=0;
AdMoveConfig.ScrollY=0;
AdMoveConfig.MoveWidth=0;
AdMoveConfig.MoveHeight=0;
AdMoveConfig.Resize=function(){
        var winsize=GetPageSize();
        AdMoveConfig.MoveWidth=winsize[2];
        AdMoveConfig.MoveHeight=winsize[3];
        AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll=function(){
        var winscroll=getPageScroll();
        AdMoveConfig.ScrollX=winscroll[0];
        AdMoveConfig.ScrollY=winscroll[1];
}
addEvent(window,"resize",AdMoveConfig.Resize);
addEvent(window,"scroll",AdMoveConfig.Scroll);
function AdMove(id){
        if(!AdMoveConfig.IsInitialized){
               AdMoveConfig.Resize();
               AdMoveConfig.IsInitialized=true;
        }
        var obj=document.getElementById(id);
        obj.style.position="absolute";
        var W=AdMoveConfig.MoveWidth-obj.offsetWidth;
        var H=AdMoveConfig.MoveHeight-obj.offsetHeight;
        var x = W*Math.random(),y = H*Math.random();
        var rad=(Math.random()+1)*Math.PI/6;
        var kx=Math.sin(rad),ky=Math.cos(rad);
        var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);
        var step = 1;
        var interval;
        this.SetLocation=function(vx,vy){x=vx;y=vy;}
        this.SetDirection=function(vx,vy){dirx=vx;diry=vy;}
        obj.CustomMethod=function(){
               obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
               obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
               rad=(Math.random()+1)*Math.PI/6;
               W=AdMoveConfig.MoveWidth-obj.offsetWidth;
               H=AdMoveConfig.MoveHeight-obj.offsetHeight;
               x = x + step*kx*dirx;
               if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
               if (x > W){dirx = -1;x = W;kx=Math.sin(rad);ky=Math.cos(rad);}
               y = y + step*ky*diry;
               if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}
               if (y > H){diry = -1;y = H;kx=Math.sin(rad);ky=Math.cos(rad);}
        }
        this.Run=function(){
               var delay = 10;
               interval=setInterval(obj.CustomMethod,delay);
               obj.onmouseover=function(){clearInterval(interval);}
               obj.onmouseout=function(){interval=setInterval(obj.CustomMethod, delay);}
        }
}
//-->
</script>
</head>
<body>
        <div id="tao123_gg1" style="width:100px;height:100px;background-color:red;color:yellow">
          广告1
        </div>
        <div id="tao123_gg2" style="width:100px;height:100px;background-color:blue;color:yellow">
          广告2
        </div>
        <div id="tao123_gg3" style="width:100px;height:100px;background-color:green;color:yellow">
          广告3
        </div>
        <script type="text/javascript">
        <!--
               var ad1=new AdMove("tao123_gg1");
               ad1.Run();
var ad2=new AdMove("tao123_gg2");
               ad2.Run();
var ad3=new AdMove("tao123_gg3");
               ad3.Run();
        //-->
        </script>
</body>
</html>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=1250

这篇日志没有评论。

此日志不可发表评论。