【原创】分享JQuery浮动广告插件

项目后期维护过程中，客户提出要在网站的首页上加一些广告图片宣传，类似于新浪网打开时的弹出效果。

     需求如下：

     a).网页两边及中间可以显示广告图片

     b).定时或手工关闭

     c).可设定图片透明度，

     d).随网页滚动而滚动

     ...

     x) 需求X待定...（此处奋斗在一线的程序员朋友们，你们懂的...）

    ok，需求很明确，不就是绝对定位一下图片，然后动态随网页滚动调整位置么，于是三下五除二上js，先看下效果，随后说明详细步骤

   

   步骤如下：

   1.构造字符串，通过dom输出图片显示的html

var  leftImg =    " <DIV id=\"leftImg\" style='left:22px;position:absolute;top:69px;'>
                       <a target='_blank'><img border=0 src=l.jpg><br><a href=\"#\";  
                       onclick=\"leftImg.style.visibility='hidden'\"><img border=0 src=close.gif></a></div> "

var  centerImg = " <DIV id=\"centerImg\" style='margin:0 auto;position:absolute;top:69px;'>
                          <a target='_blank'><img border=0 src=21.jpg><br><a href=\"#\"; onclick=\"centerImg.style.visibility ='hidden'\"><img border=0 src=close.gif></a></div> "  

var rightImg="<DIV id=\"rightImg\" style='right:22px;position:absolute;top:69px;'>

                        <a target='_blank'><img border=0 src=r.jpg><br><a href=\"#\"; 

                        onclick=\"rightImg.style.display = 'none'\"><img border=0 src=close.gif></div>"

document.write(leftImg);
document.write(centerImg);

document.write(rightImg);

 

  2.实现图片随窗口滚动，重定位

function  scrollPage(){
     var  diffY;
     if  (document.documentElement  &&  document.documentElement.scrollTop)
        diffY  =  document.documentElement.scrollTop;
     else   if  (document.body)
        diffY  =  document.body.scrollTop
     else  {
         /* Netscape stuff */
    }
    
     // alert(diffY);
    percent = . 1 * (diffY - lastScrollY);
     if (percent > 0 )
        percent = Math.ceil(percent);
     else  
        percent = Math.floor(percent);

    document.getElementById( " centerImg " ).style.left  =  parseInt((window.screen.availWidth  -                                                            document.getElementById( " centerImg " ).offsetWidth) / 2) + "px";
    document.getElementById( " leftImg " ).style.top = parseInt(document.getElementById( " leftImg " ).style.top) + percent + " px " ;
    document.getElementById( " centerImg " ).style.top = parseInt(document.getElementById( " centerImg " ).style.top) + percent + " px " ;
    document.getElementById( " rightImg " ).style.top = parseInt(document.getElementById( " leftImg " ).style.top) + percent + " px " ;
    
    lastScrollY = lastScrollY + percent;
}

window.onscroll = function (){
    scrollPage();
}

    ok，基本实现要求，但是这样的代码怎么看都就让人感觉不舒服，于是狠一下心，用Jquery插件机制来重构一下代码，毕竟这样的需求还算比较常见，整理一下思路，代码重构如下：

   

  1  /* !
  2  jquery.higo_plugins_ad.js(v0.1)
  3  http://www.higosoft.cn
  4  mailto:[email protected]
  5 
  6  Copyright (c) 2011 wdong
  7  Dual licensed under the MIT and GPL licenses.
  8  */
  9 
 10  /*
 11   * 创建浮动图片广告（Generate a dock AD image）
 12   *
 13   * USAGE: 
 14   *    $(selector).higo_plugins_ad({
 15   *        src:null,                    // 广告图片路径
 16   *        closeSrc:null,               // 关闭图片路径
 17   *        href:"#",                    // 广告图片链接地址
 18   *        autoHide:true,               // 是否自动隐藏
 19   *        hideSecond:10,               // 延迟隐藏秒数
 20   *        top:20,                      // 距离顶部偏移高度
 21   *        layout:"left",               // 图片位置：left 居左 ,right 居右, center 居中, 
 22   *        width:100,                   // 宽度
 23   *        height:100,                  // 高度
 24   *        opacity:0.5                     // 透明度opacity:0.5(firefox), filter:alpha(opacity=50)(IE)
 25   *        setPosition:function(left, top){ // 预留自定义显示位置的方法（尚未实现）
 26   *            return;
 27   *        }    
 28   *    })
 29    */
 30   
 31  ( function ($){
 32      $.fn.lastScrollY =   0 ;
 33      $.fn.higo_plugins_ad  =   function (options){
 34          $( this ).addClass( " higo_plugins_ad " );
 35           var  settings  =  $.extend({
 36              src: null ,                    
 37              closeSrc: null ,               
 38              href: " # " ,
 39              autoHide: true ,               
 40              hideSecond: 10 ,               
 41              top: 20 ,                      
 42              layout: " left " ,               
 43              width: 100 ,                   
 44              height: 100 ,                  
 45              opacity: 0.5 ,
 46              setPosition: function (left, top){
 47                   return ;
 48              }
 49          },options  ||  {});
 50          
 51           if (settings.src  &&  settings.closeSrc){        
 52               var  imgEl  =   " <a href=' "   +  settings.href  +   " ' target='_blank'><img border=0 width=' "   +  settings.width  +   " px' height=' "   +  settings.height  +   " px' src=' "   +  settings.src  +   " '/> <br></a> " ;
 53               var  closeImgEl  =   " <a href=\"#\"; onclick=\"this.parentElement.style.visibility='hidden'\"><img border=0 src=' "   +  settings.closeSrc  + " '/></a> " ;
 54              
 55              $( this ).append(imgEl  +  closeImgEl);
 56              
 57              $( this ).css( " position " , " absolute " );
 58              $( this ).css( " top " ,settings.top  +   " px " );
 59              $( this ).css( " opacity " ,settings.opacity);
 60              $( this ).css( " filter " , " alpha(opacity= "   +  parseInt(settings.opacity  *   100 )   +   " ) " );
 61              
 62               switch (settings.layout) {
 63                   case   " left " :
 64                      $( this ).css( " left " , " 22px " );
 65                       break ;
 66                   case   " right " :
 67                      $( this ).css( " right " , " 22px " );
 68                       break ;
 69                   case   " center " :
 70                       var  left  =  (parseInt(window.screen.availWidth)  -  parseInt(settings.width)) / 2 + "px";
 71                      $( this ).css( " left " ,left);
 72                       break ;
 73                   default :
 74                      $( this ).css( " left " , " 22px " );
 75                       break ;
 76              }
 77          }  else  {
 78               return ;
 79          }
 80          
 81           if (settings.autoHide) {
 82              setTimeout( " (function(){$(' "   +  $( this ).selector  +    " ').hide();})(); " ,parseInt(settings.hideSecond)  *   1000 );
 83          }
 84          
 85          window.onscroll  =   function (){
 86               var  diffY;
 87               if  (document.documentElement  &&  document.documentElement.scrollTop)
 88                  diffY  =  document.documentElement.scrollTop;
 89               else   if  (document.body)
 90                  diffY  =  document.body.scrollTop
 91               else  {
 92                   /* Netscape stuff */
 93              }
 94              
 95              percent =   1   *  (diffY  -  $.fn.lastScrollY);
 96               if (percent > 0 )
 97                  percent = Math.ceil(percent);
 98               else  
 99                  percent = Math.floor(percent);
100              
101               var  top  =  $( ' .higo_plugins_ad ' ).css( " top " );
102              
103              $( ' .higo_plugins_ad ' ).css( " top " , parseInt(top)  +  percent  +   " px " );
104              $.fn.lastScrollY  +=  percent;
105          }
106      }
107  })(jQuery);

    测试代码如下：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
<!--  saved from url=(0025)http://ad.jz123.cn/ad/33/  -->
< HTML
xmlns ="http://www.w3.org/1999/xhtml" >< HEAD >< TITLE > Jquery浮动广告插件测试 </ TITLE >
< META  http-equiv =Content-Type  content ="text/html; charset=utf8" >
< META  content ="MSHTML 6.00.2900.3395"  name =GENERATOR ></ HEAD >
< script  type ="text/javascript"  src ="jquery-1.5.2.js" ></ script >
< script  type ="text/javascript"  src ="jquery.higo_plugins_ad.js" ></ script >
< style >
    body  { width : 100% ; height : 100% ; background : url(bg.jpg) no-repeat left top ; }
    p  { height : 1000px ; }
</ style >
< BODY >
< div  id ="left" ></ div >
< div  id ="center" >   </ div >
< div  id ="right" ></ div >
< P > &nbsp; </ P >
< script  language ="javascript" >
    $(document).ready( function (){
        $( " #left " ).higo_plugins_ad({
            src: " l.jpg " ,                    
            closeSrc: " close.gif " ,               
            href: " # " ,                    
            autoHide: false ,               
            hideSecond: 5 ,               
            top: 20 ,                      
            layout: " left " ,               
            width: 94 ,                   
            height: 306 ,                  
            opacity: 0.5                      
        });
        
        $( " #center " ).higo_plugins_ad({
            src: " 21.jpg " ,                    
            closeSrc: " close.gif " ,               
            href: " # " ,                    
            autoHide: false ,               
            hideSecond: 5 ,               
            top: 20 ,                      
            layout: " center " ,               
            width: 637 ,                   
            height: 212 ,                 
            opacity: 0.5                      
        });
        
        $( " #right " ).higo_plugins_ad({
            src: " r.jpg " ,                   
            closeSrc: " close.gif " ,          
            href: " # " ,                    
            autoHide: true ,               
            hideSecond: 5 ,               
            top: 20 ,                      
            layout: " right " ,               
            width: 94 ,                   
            height: 306 ,                 
            opacity: 0.5                     
        });
    });
</ script >
</ BODY ></ HTML >

 

　　ok，最后给出全部源代码，i'm here

      本来很想展开叙述一下JQuery插件的基本开发步骤，以及这几年对Ext，JQuery使用下来的体验和感受，无奈已深夜，下次抽空，我们再详细道来..."先上一道小菜尝尝再说...",最后希望各位大侠多多指教，谢谢！