如何用jquery做页面游动的广告？

Question

就是多个广告在页面无规则的游动，可以兼容多个浏览器的,怎么做？

Answer 1

// JScript 文件
function __floatClass()
{
   
   this.hasIframe = false;
   this.ImgUrl='/images/201011.png'; // 广告图片
   this.linkUrl ='/Test.aspx';       // 广告连接
   var closeImgUrl = '/images/closebox.gif'; // 关闭按钮图片
   var closeHoveImg ='/images/closebox1.gif';// 关闭按钮鼠标移上去的图片
   var adDiv = null;
   var obj = this;
   var spanClose = null;
   var img = null;
   var timer;
    var xPos = 20;
    var yPos = 10;
    var step = 1;
    var delay = 30; 
    var width,height,Hoffset,Woffset;
    var y = 1;
    var x = 1;
     var imgType = "";
   this.init = function(){
  
      
       imgType = this.ImgUrl.substring(this.ImgUrl.lastIndexOf('.'));
        adDiv =document.createElement('div');
       adDiv.style.cssText='top:10px;left:20px;position:absolute;width:100px;height:100px;z-index:9999;';
       var innerHtml = '';
       if(this.hasIframe){ innerHtml = '<iframe style=\'width:100%;height:100%;position:absolute;z-index:900;border:none\' frameborder=\'no\' border=\'0\' ></iframe>';}
       innerHtml += '<div style=\'width:100%;height:100%;position:absolute;z-index:999;\'><a href=\''+obj.linkUrl+'\' style=\'border:none;\' target=\'_blank\' >';
      
       if(document.all && imgType ==".png")
       {
             innerHtml +='<div style="width:100%;height:100%;cursor:pointer;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + obj.ImgUrl + '\', sizingMethod=\'image\')" ></div>';
       }else{
             innerHtml +='<img  src=\''+obj.ImgUrl +'\' style=\'cursor:pointer;display:inline;border:0px\' />';
       }
        innerHtml +='</a></div>';
       adDiv.innerHTML =innerHtml; 
        spanClose = document.createElement('span');
        spanClose.style.cssText='top:5px;right:5px;position:absolute;width:12px;height:12px;z-index:1000;cursor:pointer;';
        spanClose.title='关闭';
      /** if(document.all)
       {
            spanClose.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + obj.closeImgUrl + '\', sizingMethod=\'scale\')';
            spanClose.onmouseout=function(){this.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + obj.closeImgUrl + '\', sizingMethod=\'scale\')';};  
            spanClose.onmouseover=function(){this.style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + obj.closeHoveImg + '\', sizingMethod=\'scale\')';};
       }else{*/
             spanClose.style.backgroundImage='url('+obj.closeImgUrl+')';
             spanClose.onmouseout=function(){this.style.backgroundImage='url('+obj.closeImgUrl+')';};  
             spanClose.onmouseover=function(){this.style.backgroundImage='url('+obj.closeHoveImg+')';};
      // }   
        spanClose.onclick = function(){clearInterval(timer);adDiv.parentNode.removeChild(adDiv);adDiv=null; spanClose = null;};
        adDiv.appendChild(spanClose); 
        document.body.appendChild(adDiv); 
        img = new Image();
        img.onload=function(){obj.setAdvertisement();img.onload= null;};
        img.src =   obj.ImgUrl;  
        
   };
   this.setAdvertisement = function ()
   {
        var imgDiv =  adDiv.getElementsByTagName('div')[0];
        imgDiv.onclick = function(){clearInterval(timer);adDiv.parentNode.removeChild(adDiv); adDiv=null;};
      //  img_AdvertisementImg.style.height=   img.height+'px';
        adDiv.style.height=  img.height +'px';
        //img_AdvertisementImg.style.width= img.width +'px';
        adDiv.style.width= img.width+'px';
        Hoffset =  img.height;
        Woffset = img.width;
        timer = setInterval(function(){obj.changePos();}, delay);
      
   };
 this.changePos=function() 
{
      width = obj.getClientWidth();
      height =obj.getClientHeight();
      if (y) 
      {
        yPos +=  step;
      }
      else 
      {
        yPos -= step;
      }
      if (yPos < 0) 
      {
        y = 1; yPos = 0;
      }else if (yPos >= (height - Hoffset )) 
      {
        y = 0;yPos = (height - Hoffset);
      }
      if (x) 
      {
        xPos +=step;
      }
      else 
      {
        xPos -= step;
      }
      if (xPos < 0) 
      {
        x = 1; xPos = 0;
      }else if (xPos >= (width - Woffset)) 
      {
        x = 0; xPos = (width - Woffset);
      }
      adDiv.style.left = (xPos + obj.getScrollLeft()) +"px";
      adDiv.style.top = (yPos + obj.getScrollTop())+"px";
};
    /********************
     * 取窗口滚动条滚动高度 
     ******************/
    this.getScrollTop=function ()
    {
       return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;
    };
     /********************
     * 取窗口滚动条滚动高度 
     ******************/
    this.getScrollLeft=function ()
    {
       return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft ;
    };
    /********************
     * 取窗口可视范围的高度 
     *******************/
    this.getClientHeight=function()
    {
   
       return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientHeight:document.documentElement.clientHeight;  
    };
     /********************
     * 取窗口可视范围的宽度 
     *******************/
    this.getClientWidth=function()
    { 
       return (navigator.userAgent.toLowerCase().indexOf('opera') != -1)?document.body.clientWidth:document.documentElement.clientWidth;  
    };
   
}调用：
<script type="text/javascript">
 var ad1=new __floatClass().init();
var ad2 = new  __floatClass();
 ad2.ImgUrl='/images/201011.png'; // 广告图片
  ad2.linkUrl ='/Test.aspx';       // 广告连接
ad2.init();
</script>