【原创】分享JQuery浮动广告插件

最新推荐文章于 2022-11-10 08:40:49 发布

iteye_12869

最新推荐文章于 2022-11-10 08:40:49 发布

阅读量157

点赞数

文章标签： jQuery CSS JavaScript IE EXT ViewUI

项目后期维护过程中，客户提出要在网站的首页上加一些广告图片宣传，类似于新浪网打开时的弹出效果。

需求如下：

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=\"#\";
                       οnclick=\"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=\"#\"; οnclick=\"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=\"#\";

οnclick=\"rightImg.style.display = 'none'\"><img border=0 src=close.gif></div>"

document.write(leftImg);
document.write(centerImg);

document.write(rightImg);

2.实现图片随窗口滚动，重定位

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 *        width: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             width: 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=\"#\"; οnclick=\"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" >

< 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 " ,
            width: 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 " ,
            width: 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 " ,
            width: 94 ,
            height: 306 ,
            opacity: 0.5
        });
    });
</ script >
</ BODY ></ HTML >

　　ok，最后给出全部源代码，i'm here

本来很想展开叙述一下JQuery插件的基本开发步骤，以及这几年对Ext，JQuery使用下来的体验和感受，无奈已深夜，下次抽空，我们再详细道来..."先上一道小菜尝尝再说...",最后希望各位大侠多多指教，谢谢！

iteye_12869

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【原创】分享JQuery浮动广告插件

项目后期维护过程中，客户提出要在网站的首页上加一些广告图片宣传，类似于新浪网打开时的弹出效果。需求如下： a).网页两边及中间可以显示广告图片 b).定时或手工关闭 c).可设定图片透明度， d).随网页滚动而滚动 ... x) 需求X待定...（此处奋斗在一线的程序员朋友们，你们懂的...） ok，需...
复制链接

扫一扫