原理很简单,就是浮动 position:absolute,可关闭
//轻量级jquery对联广告插件 //版权 优装网 www.youzhuang.net //作者 逐月 zhuyue.cnblogs.com //演示 http://www.youzhuang.net //调用方法 //$("body").couplet({width:100,height:300,leftCouplet:"http://www.youzhuang.net/ad/left.swf",rightCouplet:"http://www.youzhuang.net/ad/right.swf"});}); //调用参数 //width:100,--宽 默认宽度100 //height:300,--总高 默认高度 300 //top:100,广告距顶部的高度 //leftCouplet:"http://www.youzhuang.net/ad/left.swf",左则flash地址或图片地址 //leftLink:"http://www.youzhuang.net/",左则连接地址,广告是图片时需要 //rightCouplet:"http://www.youzhuang.net/ad/right.swf",右则flash地址或图片地址 //rightLink:"http://www.youzhuang.net/"右则连接地址,广告是图片时需要 jQuery.fn.couplet = function(settings) { settings = jQuery.extend({ width: 100, height:300, top:100, leftCouplet:"", leftLink:"http://www.youzhuang.net/", rightCouplet:"", rightLink:"http://www.youzhuang.net/" }, settings); var s = this; //添加广告窗口 s.append("<div class=\"couplet\" id=\"leftCouplet\" style=\"width:"+settings.width+";left:10px;top:0px; position:absolute;background:#e5e5e5;\"></div>"); s.append("<div class=\"couplet\" id=\"rightCouplet\" style=\"width:"+settings.width+";right:10px;top:0px; position:absolute;background:#e5e5e5;\"></div>"); var leftCouplet = s.children("#leftCouplet"); var rightCouplet = s.children("#rightCouplet"); //加载左则广告 if(settings.leftCouplet.substring(settings.leftCouplet.lastIndexOf('.')).toLowerCase() == ".swf"){ leftCouplet.append("<div><embed src=\""+settings.leftCouplet+"\" width=\""+settings.width+"\" height=\""+settings.height+"\" </embed></div>"); }else{ leftCouplet.append("<a href='"+settings.leftLink+"' target='_blank'><img src=\""+settings.leftCouplet+"\" width=\""+settings.width+"\" height=\""+settings.height+"\"/></a>"); } //加载右则广告 if(settings.rightCouplet.substring(settings.rightCouplet.lastIndexOf('.')).toLowerCase() == ".swf"){ rightCouplet.append("<embed src=\""+settings.rightCouplet+"\" width=\""+settings.width+"\" height=\""+settings.height+"\" frameborder=\"0\"></embed>"); }else{ rightCouplet.append("<a href='"+settings.rightLink+"' target='_blank'><img src=\""+settings.rightCouplet+"\" width=\""+settings.width+"\" height=\""+settings.height+"\"/></a>"); } var closeBtn = "<div class=\"coupletClose\" style=\"text-align:center;padding:2px 0px;font-size:12px;cursor:pointer \">关闭</label>"; leftCouplet.append(closeBtn); rightCouplet.append(closeBtn); $(".coupletClose").click(function(){ leftCouplet.remove(); rightCouplet.remove(); }); //显示对联 show(); function show(){ var winTop = $(window).scrollTop(); $(".couplet").animate({ top: winTop + settings.top }, 300); }; //滚动条事件 $(window).scroll(function() { $(".couplet").stop(); show(); }); };