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

效果图:

文件的位置摆放:

插件的代码:

  1 ;(function($){
  2         $.extend({
  3         dLAdv:function(options){
  4             var defaults={
  5                 leftType:0,//左边广告图片效果0稳固不动,1缓慢复位
  6                 rightType:0,//右边广告图片的效果0稳固不动,1缓慢复位
  7                 leftTime:300,//左边复位时间
  8                 rightTime:300,//右边复位时间
  9                 leftCloseTime:1000,//左边关闭时间
 10                 rightCloseTime:1000,//右边关闭时间
 11                 leftToTop:200,//左边广告top
 12                 leftToLeft:0,//左边广告离浏览器左边距离
 13                 rightToTop:200,//右边广告top
 14                 rightToRight:0,//右边广告离浏览器有变距离
 15                 leftAdvStr:0,//左边的广告,1有,0无
 16                 rightAdvStr:0,//右边的广告,1有,0无
 17                 leftWidth:140,//左边广告宽度
 18                 leftHeight:200,//左边广告高度
 19                 rightWidth:140,//右边广告宽度
 20                 rightHeight:200,//右边广告高度
 21                 leftSrc:"dlAdvPic.jpg",//左边图片路径
 22                 leftAlt:"advertising",//左边广告图片的alt值
 23                 rightSrc:"dlAdvPic.jpg",//右边图片路径
 24                 rightAlt:"advertising",//右边广告图片的alt值
 25                 leftZindex:800,//左边层级
 26                 rightZindex:800,//右边层级
 27                 strClose:"关闭",
 28                 //下面2项不做参数给出
 29                 leftClass:"dlBoxLeft",//左边class
 30                 rightClass:"dlBoxRight"//右边class
 31             }
 32             options= $.extend(defaults,options);
 33             var html="";
 34             if(options.leftAdvStr===1){
 35             html+="<div class="+options.leftClass+">";
 36             html+="<div class=‘dlAdvLeftImgBox‘><img class=‘dlAdvleftImg‘ src="+options.leftSrc+" alt="+options.leftAlt+"></div>";
 37             html+="<div class=‘dlAdvCloseDiv‘><a class=‘dlAdvClose dlAdvLeftClose‘>"+options.strClose+"</a></div>";
 38             html+="</div>";
 39             }
 40             if(options.rightAdvStr===1){
 41             html+="<div class="+options.rightClass+">";
 42             html+="<div class=‘dlAdvRightImgBox‘><img class=‘dlAdvRightImg‘ src="+options.rightSrc+" alt="+options.rightAlt+"></div>";
 43             html+="<div class=‘dlAdvCloseDiv‘><a class=‘dlAdvClose dlAdvRightClose‘>"+options.strClose+"</a></div>";
 44             html+="</div>";
 45             }
 46             $("body").append(html);
 47             $(".dlAdvLeftClose,.dlAdvRightClose").on("click",function(){
 48                 if($(this).is(".dlAdvLeftClose"))
 49                 $("."+options.leftClass).fadeOut(options.leftCloseTime,function(){
 50                     $(this).remove();
 51                 });
 52                 else if($(this).is(".dlAdvRightClose"))
 53                 $("."+options.rightClass).fadeOut(options.rightCloseTime,function(){
 54                     $(this).remove();
 55                 });
 56             })
 57 
 58 
 59             var leftAdv=$("."+options.leftClass),
 60             rightAdv=$("."+options.rightClass),
 61             dlAdvCloseHeight=$(".dlAdvCloseDiv").eq(0).outerHeight();
 62             leftAdv.css({"z-index":options.leftZindex});
 63             rightAdv.css({"z-index":options.rightZindex});    
 64             function changeImgSize(imgObj,width,height){
 65                 height-=dlAdvCloseHeight;
 66                 imgObj.parent().width(width).height(height);
 67                 imgObj.css({height:"100%",width:"100%"});
 68             }
 69            function getAdvTop(pos,type){//pos,左,右,type,效果
 70                 if(type===0){
 71                     if(pos==="left"){
 72                        return {top:options.leftToTop+"px"};
 73                     }
 74                     else if(pos==="right"){
 75                         return {top:options.rightToTop+"px"};
 76                     }
 77                 }
 78                else if(type===1){
 79                     var scrollTop=$(window).scrollTop();
 80                     var top=0;
 81                     if(pos==="left"){
 82                          top=options.leftToTop+scrollTop;
 83                         return {top:top+"px"};
 84                     }
 85                     else if(pos==="right"){
 86                          top=options.rightToTop+scrollTop;
 87                         return {top:top+"px"};
 88                     }
 89 
 90                 }
 91                else{alert("方法getAdvTop的type有误")}
 92            }
 93             var leftAdvSize={width:options.leftWidth+"px",height:options.leftHeight+"px"};
 94             var rightAdvSize={width:options.rightWidth+"px",height:options.rightHeight+"px"};
 95             var leftAdvPos={left:options.leftToLeft+"px"};
 96             var rightAdvPos={right:options.rightToRight+"px"};            
 97             changeImgSize($(".dlAdvleftImg"),options.leftWidth,options.leftHeight);
 98             changeImgSize($(".dlAdvRightImg"),options.rightWidth,options.rightHeight);
 99             function scrollMove(num){//num是数值,不同的数值表示的不同的缓慢恢复的对象
100                 $(window).scroll(function(){
101                     var scrollTop=$(window).scrollTop(),top=0;
102                     if(num===-1){//左边
103                          top=scrollTop+options.leftToTop;
104                         setTimeout(function(){
105                             leftAdv.css({top:top+"px"});
106                         },options.leftTime);
107                     }
108                     else if(num===1){//右边
109                           top=options.rightToTop+scrollTop;
110                        // rightAdv.animate({top:top+"px"},1000)
111                         setTimeout(function(){
112                             //rightAdv.animate({top:top+"px"},1000)
113                             rightAdv.css({top:top+"px"});
114                         },options.rightTime)
115 
116                     }
117                     else if(num===2){//两边
118                         var leftTop=scrollTop+options.leftToTop;
119                         var rightTop=scrollTop+options.rightToTop;
120                         setTimeout(function(){
121                             leftAdv.css({top:leftTop+"px"});
122                         },options.leftTime)
123                         setTimeout(function(){
124                             rightAdv.css({top:rightTop+"px"});
125                         },options.rightTime);
126                     }
127                 });
128             }
129          var whoMove=0;//0,都不缓慢移动,-1,左边缓慢移动,1表示右边缓慢移动,2表示都移动
130         if(options.leftType===0){//稳固不动
131             leftAdv.css({"position":"fixed"}).css(getAdvTop("left",options.leftType)).css(leftAdvSize).css(leftAdvPos);
132         }
133             else if(options.leftType===1){//缓慢恢复
134             leftAdv.css({"position":"absolute"}).css(getAdvTop("left",options.leftType)).css(leftAdvSize).css(leftAdvPos);
135             whoMove=-1;
136         }
137             else {
138             alert("左对联广告的效果参数传递有误");
139         }
140             if(options.rightType===0){
141                 rightAdv.css({"position":"fixed"}).css(getAdvTop("right",options.rightType)).css(rightAdvSize).css(rightAdvPos);
142             }
143             else if(options.rightType===1){
144                 rightAdv.css({"position":"absolute"}).css(getAdvTop("right",options.rightType)).css(rightAdvSize).css(rightAdvPos);
145                 whoMove=(whoMove===0?1:2);
146             }
147             else {
148                 alert("右对联广告的效果参数传递有误");
149             }
150             if(whoMove===0){}//都不缓慢恢复
151             else if(whoMove===-1){//左边缓慢移动
152 scrollMove(whoMove);
153             }
154             else if(whoMove===1){//右边缓慢移动
155                 scrollMove(whoMove)
156              }
157             else if(whoMove===2){//左右都缓慢移动
158                 scrollMove(whoMove)
159             }
160         }
161         });
162         })(jQuery);
163  

css代码:

1 .dlBoxLeft{ border:1px solid #ccc;padding:3px;background-color:#efefef; } 
2 .dlBoxRight{border:1px solid #ccc;padding:3px; background-color:#efefef;} 
3 .dlAdvLeftImgBox{ } 
4 .dlAdvCloseDiv{background-image:url(dlCloseBj.jpg);background-repeat:repeat-x;height:25px;border-top:1px solid #ccc; margin-top:3px;} 
5 .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;} 

插件的调用

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

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

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

自己写的一个jQuery对联广告插件,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。