自己写的一个jQuery对联广告插件

效果图:

文件的位置摆放:

插件的代码:

 ;(function($){
         $.extend({
         dLAdv:function(options){
             var defaults={
                 leftType:0,//左边广告图片效果0稳固不动,1缓慢复位
                 rightType:0,//右边广告图片的效果0稳固不动,1缓慢复位
                 leftTime:300,//左边复位时间
                 rightTime:300,//右边复位时间
                 leftCloseTime:1000,//左边关闭时间
                 rightCloseTime:1000,//右边关闭时间
                 leftToTop:200,//左边广告top
                 leftToLeft:0,//左边广告离浏览器左边距离
                 rightToTop:200,//右边广告top
                 rightToRight:0,//右边广告离浏览器有变距离
                 leftAdvStr:0,//左边的广告,1有,0无
                 rightAdvStr:0,//右边的广告,1有,0无
                 leftWidth:140,//左边广告宽度
                 leftHeight:200,//左边广告高度
                 rightWidth:140,//右边广告宽度
                 rightHeight:200,//右边广告高度
                 leftSrc:"dlAdvPic.jpg",//左边图片路径
                 leftAlt:"advertising",//左边广告图片的alt值
                 rightSrc:"dlAdvPic.jpg",//右边图片路径
                 rightAlt:"advertising",//右边广告图片的alt值
                 leftZindex:800,//左边层级
                 rightZindex:800,//右边层级
                 strClose:"关闭",
                 //下面2项不做参数给出
                 leftClass:"dlBoxLeft",//左边class
                 rightClass:"dlBoxRight"//右边class
             }
             options= $.extend(defaults,options);
             var html="";
             if(options.leftAdvStr===1){
             html+="<div class="+options.leftClass+">";
             html+="<div class='dlAdvLeftImgBox'><img class='dlAdvleftImg' src="+options.leftSrc+" alt="+options.leftAlt+"></div>";
             html+="<div class='dlAdvCloseDiv'><a class='dlAdvClose dlAdvLeftClose'>"+options.strClose+"</a></div>";
             html+="</div>";
             }
             if(options.rightAdvStr===1){
             html+="<div class="+options.rightClass+">";
             html+="<div class='dlAdvRightImgBox'><img class='dlAdvRightImg' src="+options.rightSrc+" alt="+options.rightAlt+"></div>";
             html+="<div class='dlAdvCloseDiv'><a class='dlAdvClose dlAdvRightClose'>"+options.strClose+"</a></div>";
             html+="</div>";
             }
             $("body").append(html);
             $(".dlAdvLeftClose,.dlAdvRightClose").on("click",function(){
                 if($(this).is(".dlAdvLeftClose"))
                 $("."+options.leftClass).fadeOut(options.leftCloseTime,function(){
                     $(this).remove();
                 });
                 else if($(this).is(".dlAdvRightClose"))
                 $("."+options.rightClass).fadeOut(options.rightCloseTime,function(){
                     $(this).remove();
                 });
             })

             var leftAdv=$("."+options.leftClass),
             rightAdv=$("."+options.rightClass),
             dlAdvCloseHeight=$(".dlAdvCloseDiv").eq(0).outerHeight();
             leftAdv.css({"z-index":options.leftZindex});
             rightAdv.css({"z-index":options.rightZindex});
             function changeImgSize(imgObj,width,height){
                 height-=dlAdvCloseHeight;
                 imgObj.parent().width(width).height(height);
                 imgObj.css({height:"100%",width:"100%"});
             }
            function getAdvTop(pos,type){//pos,左,右,type,效果
                 if(type===0){
                     if(pos==="left"){
                        return {top:options.leftToTop+"px"};
                     }
                     else if(pos==="right"){
                         return {top:options.rightToTop+"px"};
                     }
                 }
                else if(type===1){
                     var scrollTop=$(window).scrollTop();
                     var top=0;
                     if(pos==="left"){
                          top=options.leftToTop+scrollTop;
                         return {top:top+"px"};
                     }
                     else if(pos==="right"){
                          top=options.rightToTop+scrollTop;
                         return {top:top+"px"};
                     }

                 }
                else{alert("方法getAdvTop的type有误")}
            }
             var leftAdvSize={width:options.leftWidth+"px",height:options.leftHeight+"px"};
             var rightAdvSize={width:options.rightWidth+"px",height:options.rightHeight+"px"};
             var leftAdvPos={left:options.leftToLeft+"px"};
             var rightAdvPos={right:options.rightToRight+"px"};
             changeImgSize($(".dlAdvleftImg"),options.leftWidth,options.leftHeight);
             changeImgSize($(".dlAdvRightImg"),options.rightWidth,options.rightHeight);
             function scrollMove(num){//num是数值,不同的数值表示的不同的缓慢恢复的对象
                 $(window).scroll(function(){
                     var scrollTop=$(window).scrollTop(),top=0;
                     if(num===-1){//左边
                          top=scrollTop+options.leftToTop;
                         setTimeout(function(){
                             leftAdv.css({top:top+"px"});
                         },options.leftTime);
                     }
                     else if(num===1){//右边
                           top=options.rightToTop+scrollTop;
                        // rightAdv.animate({top:top+"px"},1000)
                         setTimeout(function(){
                             //rightAdv.animate({top:top+"px"},1000)
                             rightAdv.css({top:top+"px"});
                         },options.rightTime)

                     }
                     else if(num===2){//两边
                         var leftTop=scrollTop+options.leftToTop;
                         var rightTop=scrollTop+options.rightToTop;
                         setTimeout(function(){
                             leftAdv.css({top:leftTop+"px"});
                         },options.leftTime)
                         setTimeout(function(){
                             rightAdv.css({top:rightTop+"px"});
                         },options.rightTime);
                     }
                 });
             }
          var whoMove=0;//0,都不缓慢移动,-1,左边缓慢移动,1表示右边缓慢移动,2表示都移动
         if(options.leftType===0){//稳固不动
             leftAdv.css({"position":"fixed"}).css(getAdvTop("left",options.leftType)).css(leftAdvSize).css(leftAdvPos);
         }
             else if(options.leftType===1){//缓慢恢复
             leftAdv.css({"position":"absolute"}).css(getAdvTop("left",options.leftType)).css(leftAdvSize).css(leftAdvPos);
             whoMove=-1;
         }
             else {
             alert("左对联广告的效果参数传递有误");
         }
             if(options.rightType===0){
                 rightAdv.css({"position":"fixed"}).css(getAdvTop("right",options.rightType)).css(rightAdvSize).css(rightAdvPos);
             }
             else if(options.rightType===1){
                 rightAdv.css({"position":"absolute"}).css(getAdvTop("right",options.rightType)).css(rightAdvSize).css(rightAdvPos);
                 whoMove=(whoMove===0?1:2);
             }
             else {
                 alert("右对联广告的效果参数传递有误");
             }
             if(whoMove===0){}//都不缓慢恢复
             else if(whoMove===-1){//左边缓慢移动
 scrollMove(whoMove);
             }
             else if(whoMove===1){//右边缓慢移动
                 scrollMove(whoMove)
              }
             else if(whoMove===2){//左右都缓慢移动
                 scrollMove(whoMove)
             }
         }
         });
         })(jQuery);
  

css代码:

 .dlBoxLeft{ border:1px solid #ccc;padding:3px;background-color:#efefef; }
 .dlBoxRight{border:1px solid #ccc;padding:3px; background-color:#efefef;}
 .dlAdvLeftImgBox{ }
 .dlAdvCloseDiv{background-image:url(dlCloseBj.jpg);background-repeat:repeat-x;height:25px;border-top:1px solid #ccc; margin-top:3px;}
 .dlAdvClose{ /*width:auto; display:block;*/ font-size:12px; font-family:"宋体"; cursor:pointer;background-image:url(dlClosebutton.jpg); background-repeat:no-repeat; display:block;width:52px; height:19px; margin:0 auto; margin-top:3px;color:#7f7c7c; padding-left:8px; font-weight:bold; padding-top:1px; text-align:center; line-height:19px;} 

插件的调用

 $(function(){
     $.dLAdv({leftAdvStr:1,leftType:0,rightAdvStr:1,rightType:1});
 })

给页面一个div,让它撑出滚动条.

 <div style="height:10000px;"> </div>