浮广告,兼容ie、firefox,多个漂浮不冲突,调用只需两行代码

将广告内容放在div中,设置一个id,然后用下面方法调用
var adcls=new AdMove("div的id");
adcls.Run();

注意,在调用前要先引用Main.js和AdFloat.js,div也要在调用前写好,原因就不用说了吧

或者也可以用下面方法,在页面加载完成时调用,就不用考虑位置了addEvent(window,"load",initad);
function initad(){
var adcls=new AdMove("div的id");
adcls.Run();
}


还有两个方法一般情况下没什么用,有兴趣的可以试试,功能是设置漂浮的起始坐标和方向的,如果省掉的话是随机位置随机方向
adcls.SetLocation(x,y)
adcls.SetDirection(dirx,diry)


漂浮广告的斜率是每次碰壁后随机改变的,这样就决不可能出现多个广告,起始位置和方向一致导致其中一个总是被挡住,虽然几率很小

 

下面是演示代码
<! 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 ="gg1"  style ="width:100px;height:100px;background-color:red;color:yellow" >
        广告1
    
</ div >
    
< div  id ="gg2"  style ="width:100px;height:100px;background-color:blue;color:yellow" >
        广告2
    
</ div >
    
< div  id ="gg3"  style ="width:100px;height:100px;background-color:green;color:yellow" >
        广告3
    
</ div >
    
< script  type ="text/javascript" >
    
<!--
        
var  ad1 = new  AdMove( " gg1 " );
        ad1.Run();
    
var  ad2 = new  AdMove( " gg2 " );
        ad2.Run();
    
var  ad3 = new  AdMove( " gg3 " );
        ad3.Run();
    
// -->
     </ script >
</ body >
</ html >

 

 

你可能感兴趣的:(firefox)