效果图:
文件的位置摆放:
插件的代码:
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%","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={options.leftWidth+"px",height:options.leftHeight+"px"}; 94 var rightAdvSize={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{ /*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>