JQuery浮动广告插件
项目后期维护过程中，客户提出要在网站的首页上加一些广告图片宣传，类似于新浪网打开时的弹出效果。
http://www.cnblogs.com/wdong/archive/2011/06/15/higo_plugins_ad.html
需求如下：
a).网页两边及中间可以显示广告图片
b).定时或手工关闭
c).可设定图片透明度，
d).随网页滚动而滚动
...
x) 需求X待定...（此处奋斗在一线的程序员朋友们，你们懂的...）
ok，需求很明确，不就是绝对定位一下图片，然后动态随网页滚动调整位置么，于是三下五除二上js，先看下效果，随后说明详细步骤
步骤如下：
1.构造字符串，通过dom输出图片显示的html
var leftImg = " <DIV id=\"leftImg\" style='left:22px;position:absolute;top:69px;'>
<a target='_blank'><img border=0 src=l.jpg><br><a href=\"#\";
onclick=\"leftImg.style.visibility='hidden'\"><img border=0 src=close.gif></a></div> "
var centerImg = " <DIV id=\"centerImg\" style='margin:0 auto;position:absolute;top:69px;'>
<a target='_blank'><img border=0 src=21.jpg><br><a href=\"#\"; onclick=\"centerImg.style.visibility
='hidden'\"><img border=0 src=close.gif></a></div> "
var rightImg = " <DIV id=\"rightImg\" style='right:22px;position:absolute;top:69px;'>
<a target='_blank'><img border=0 src=r.jpg><br><a href=\"#\";
onclick=\"rightImg.style.display = 'none'\"><img border=0 src=close.gif></div> "
document.write(leftImg);
document.write(centerImg);
document.write(rightImg);
2.实现图片随窗口滚动，重定位
function scrollPage(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else {
/* Netscape stuff */
}
// alert(diffY);
percent = . 1 * (diffY - lastScrollY);
if (percent > 0 )
percent = Math.ceil(percent);
else
percent = Math.floor(percent);
document.getElementById( " centerImg " ).style.left = parseInt((window.screen.availWidth - document.getElementById( " centerImg " ).offsetWidth) / 2) + "px";
document.getElementById( " leftImg " ).style.top = parseInt(document.getElementById( " leftImg " ).style.top) + percent + " px " ;
document.getElementById( " centerImg " ).style.top = parseInt(document.getElementById( " centerImg " ).style.top) + percent + " px " ;
document.getElementById( " rightImg " ).style.top = parseInt(document.getElementById( " leftImg " ).style.top) + percent + " px " ;
lastScrollY = lastScrollY + percent;
}
window.onscroll = function (){
scrollPage();
}
ok，基本实现要求，但是这样的代码怎么看都就让人感觉不舒服，于是狠一下心，用Jquery插件机制来重构一下代码，毕竟这样的需求还算比较常见，整理一下思路，代码重构如下：
1 /* !
2 jquery.higo_plugins_ad.js(v0.1)
3 http://www.higosoft.cn
4 mailto:wdong0472@gmail.com
5
6 Copyright (c) 2011 wdong
7 Dual licensed under the MIT and GPL licenses.
8 */
9
10 /*
11 * 创建浮动图片广告（Generate a dock AD image）
12 *
13 * USAGE:
14 * $(selector).higo_plugins_ad({
15 * src:null, // 广告图片路径
16 * closeSrc:null, // 关闭图片路径
17 * href:"#", // 广告图片链接地址
18 * autoHide:true, // 是否自动隐藏
19 * hideSecond:10, // 延迟隐藏秒数
20 * top:20, // 距离顶部偏移高度
21 * layout:"left", // 图片位置：left 居左 ,right 居右, center 居中,
22 * 100, // 宽度
23 * height:100, // 高度
24 * opacity:0.5 // 透明度opacity:0.5(firefox), filter:alpha(opacity=50)(IE)
25 * setPosition:function(left, top){ // 预留自定义显示位置的方法（尚未实现）
26 * return;
27 * }
28 * })
29 */
30
31 ( function ($){
32 $.fn.lastScrollY = 0 ;
33 $.fn.higo_plugins_ad = function (options){
34 $( this ).addClass( " higo_plugins_ad " );
35 var settings = $.extend({
36 src: null ,
37 closeSrc: null ,
38 href: " # " ,
39 autoHide: true ,
40 hideSecond: 10 ,
41 top: 20 ,
42 layout: " left " ,
43 100 ,
44 height: 100 ,
45 opacity: 0.5 ,
46 setPosition: function (left, top){
47 return ;
48 }
49 },options || {});
50
51 if (settings.src && settings.closeSrc){
52 var imgEl = " <a href=' " + settings.href + " ' target='_blank'><img border=0 width=' " + settings.width + " px' height=' " + settings.height + " px' src=' " + settings.src + " '/> <br></a> " ;
53 var closeImgEl = " <a href=\"#\"; onclick=\"this.parentElement.style.visibility='hidden'\"><img border=0 src=' " + settings.closeSrc + " '/></a> " ;
54
55 $( this ).append(imgEl + closeImgEl);
56
57 $( this ).css( " position " , " absolute " );
58 $( this ).css( " top " ,settings.top + " px " );
59 $( this ).css( " opacity " ,settings.opacity);
60 $( this ).css( " filter " , " alpha(opacity= " + parseInt(settings.opacity * 100 ) + " ) " );
61
62 switch (settings.layout) {
63 case " left " :
64 $( this ).css( " left " , " 22px " );
65 break ;
66 case " right " :
67 $( this ).css( " right " , " 22px " );
68 break ;
69 case " center " :
70 var left = (parseInt(window.screen.availWidth) - parseInt(settings.width)) / 2 + "px";
71 $( this ).css( " left " ,left);
72 break ;
73 default :
74 $( this ).css( " left " , " 22px " );
75 break ;
76 }
77 } else {
78 return ;
79 }
80
81 if (settings.autoHide) {
82 setTimeout( " (function(){$(' " + $( this ).selector + " ').hide();})(); " ,parseInt(settings.hideSecond) * 1000 );
83 }
84
85 window.onscroll = function (){
86 var diffY;
87 if (document.documentElement && document.documentElement.scrollTop)
88 diffY = document.documentElement.scrollTop;
89 else if (document.body)
90 diffY = document.body.scrollTop
91 else {
92 /* Netscape stuff */
93 }
94
95 percent = 1 * (diffY - $.fn.lastScrollY);
96 if (percent > 0 )
97 percent = Math.ceil(percent);
98 else
99 percent = Math.floor(percent);
100
101 var top = $( ' .higo_plugins_ad ' ).css( " top " );
102
103 $( ' .higo_plugins_ad ' ).css( " top " , parseInt(top) + percent + " px " );
104 $.fn.lastScrollY += percent;
105 }
106 }
107 })(jQuery);
测试代码如下：
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" >
<!-- saved from url=(0025)http://ad.jz123.cn/ad/33/ -->
< HTML
xmlns ="http://www.w3.org/1999/xhtml" >< HEAD >< TITLE > Jquery浮动广告插件测试 </ TITLE >
< META http-equiv =Content-Type content ="text/html; charset=utf8" >
< META content ="MSHTML 6.00.2900.3395" name =GENERATOR ></ HEAD >
< script type ="text/javascript" src ="jquery-1.5.2.js" ></ script >
< script type ="text/javascript" src ="jquery.higo_plugins_ad.js" ></ script >
< style >
body { width : 100% ; height : 100% ; background : url(bg.jpg) no-repeat left top ; }
p { height : 1000px ; }
</ style >
< BODY >
< div id ="left" ></ div >
< div id ="center" > </ div >
< div id ="right" ></ div >
< P > </ P >
< script language ="javascript" >
$(document).ready( function (){
$( " #left " ).higo_plugins_ad({
src: " l.jpg " ,
closeSrc: " close.gif " ,
href: " # " ,
autoHide: false ,
hideSecond: 5 ,
top: 20 ,
layout: " left " ,
94 ,
height: 306 ,
opacity: 0.5
});
$( " #center " ).higo_plugins_ad({
src: " 21.jpg " ,
closeSrc: " close.gif " ,
href: " # " ,
autoHide: false ,
hideSecond: 5 ,
top: 20 ,
layout: " center " ,
637 ,
height: 212 ,
opacity: 0.5
});
$( " #right " ).higo_plugins_ad({
src: " r.jpg " ,
closeSrc: " close.gif " ,
href: " # " ,
autoHide: true ,
hideSecond: 5 ,
top: 20 ,
layout: " right " ,
94 ,
height: 306 ,
opacity: 0.5
});
});
</ script >
</ BODY ></ HTML >
ok，最后给出全部源代码， i'm here
本来很想展开叙述一下JQuery插件的基本开发步骤，以及这几年对Ext，JQuery使用下来的体验和感受，无奈已深夜，下次抽空，我们再详细道来..."先上一道小菜尝尝再说...",最后希望各位大侠多多指教，谢谢！
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息