自己写的一个jQuery对联广告插件
2014-03-07 13:43
316 查看
效果图:
文件的位置摆放:
插件的代码:
css代码:
插件的调用
给页面一个div,让它撑出滚动条.
文件的位置摆放:
插件的代码:
;(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>
相关文章推荐
- 利用图片延迟加载来优化页面性能(jQuery)
- jquery easyui datagrid 两次加载的问题
- jQuery的.bind()、.live()和.delegate()之间的区别
- 我的第十六课:jQuery - 获取并设置 CSS 类
- jQuery 的运行机制(How jQuery Works)
- jQuery插件:图片放大镜--jQuery Zoom
- 自己写的jQuery颜色插件
- 开发中可能会用到的几个 jQuery 小提示和技巧
- 自己写的jQuery拖动滑块
- 自己写的一个jQuery分页插件
- 开发中可能会用到的几个 jQuery 小提示和技巧
- JQuery数字类型验证正则表达式
- jQuery操作<input type="radio">
- 开发中可能会用到的几个 jQuery 小提示和技巧(转)
- jQuery炫酷翻页图片相册
- jquery中常用的函数和属性详细解析
- 开发中可能会用到的几个 jQuery 小提示和技巧
- jquery判断checkbox是否被选中
- 基于asp.net JQuery Ajax使用方法[付完整函数]
- jQuery事件绑定.on()简要概述及应用