效果图:
文件的位置摆放:
插件的代码:
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>