首页 > Web开发 > 详细

自己写的jQuery浮动广告插件

时间:2014-03-09 11:33:36      阅读:639      评论:0      收藏:0      [点我收藏+]

效果图:

bubuko.com,布布扣

文件位置摆放:

bubuko.com,布布扣

插件的js代码:

bubuko.com,布布扣
  1 $.extend({
  2             pfAdv:function(options){
  3                 var defaults={
  4                     count:1,
  5                     startTop:200,
  6                     startLeft:200,
  7                     width:140,//??С
  8                     height:180,
  9                     imageSrc:"pfAdvPic.jpg",
 10                     step:1,
 11                     delay:30,
 12                     idStr:"pfAdv"
 13                 }
 14                 options= $.extend(defaults,options);
 15                 var html="";
 16                 html+="<div id="+options.idStr+" class=‘pfAdv‘>";
 17                 html+="<div class=‘plCloseDiv‘></div>";
 18                 html+="<div><img src="+options.imageSrc+"></div>";
 19                 html+="</div>";
 20                 $("body").append(html);//html
 21                 var advBoxObj=$("#"+options.idStr);//
 22                 advBoxObj.css({"position":"absolute","z-index":998}).width(options.width).height(options.height);//涨λ
 23                 $("img",advBoxObj).width(options.width).height(options.height);
 24                 var advH=advBoxObj.outerHeight();//??
 25                 var advW=advBoxObj.outerWidth();//?
 26                 var advMaxTop=0;//top
 27                 var advMaxLeft=0;//left
 28                 var stepMashionX=1;//1,???step,-1???step
 29                 var stepMashionY=1;//1,??step,-1??step
 30                 var currentX=0;//
 31                 var currentY=0;
 32                 var divToBrowTop=options.startTop;
 33                 var divToBrowLeft=options.startLeft;
 34                 function getScroll(){
 35                     var scrollTop=$(window).scrollTop();//??
 36                     var scrollLeft=$(window).scrollLeft();//
 37                     return {x:scrollLeft,y:scrollTop};
 38                 }
 39                 function move(){
 40                     var browW=$(window).width();//
 41                     var browH=$(window).height();//?
 42                     var scroll=getScroll();
 43                     currentX=divToBrowLeft+scroll.x;//top
 44                     currentY=divToBrowTop+scroll.y;//left
 45                     advMaxTop=browH-advH+scroll.y;//top,
 46                     advMaxLeft=browW-advW+scroll.x;//left,
 47 
 48 
 49                     if(currentY>=advMaxTop){
 50                         stepMashionY=-1;
 51                         currentY=divToBrowTop-options.step;
 52                     }
 53                     else if(currentY>scroll.y&&currentY<advMaxTop){
 54                         if(stepMashionY==-1)
 55                             currentY=divToBrowTop-options.step;
 56 
 57                         else if(stepMashionY==1)
 58                             currentY=divToBrowTop+options.step;
 59                         else alert("??stepMashionY");
 60                     }
 61                     else if(currentY<=scroll.y){
 62                         stepMashionY=1;
 63                         currentY=divToBrowTop+options.step;
 64                     }
 65                     else {
 66                         alert("???");
 67                     }
 68                     if(currentX>=advMaxLeft){
 69                         stepMashionX=-1;
 70                         currentX=divToBrowLeft-options.step;
 71                     }
 72                     else if(currentX>scroll.x&&currentX<advMaxLeft){
 73                         if(stepMashionX==-1){
 74                             currentX=divToBrowLeft-options.step;
 75                         }
 76                         else if(stepMashionX==1){
 77                             currentX=divToBrowLeft+options.step;
 78                         }
 79                         else alert("???stepMashionX")
 80                     }
 81                     else if(currentX<=scroll.x){
 82                         stepMashionX=1;
 83                         currentX=divToBrowLeft+options.step;
 84                     }
 85                     else {
 86                         alert("????");
 87                     }
 88                     divToBrowLeft=currentX;
 89                     divToBrowTop=currentY;
 90                     //var scroll=getScroll();
 91                     currentX+=scroll.x;
 92                     currentY+=scroll.y;
 93                     advBoxObj.css({top:currentY+"px",left:currentX+"px"});
 94                 }
 95                 $(".plCloseDiv",advBoxObj).on("click",function(){advBoxObj.remove()})
 96                 //$(window).resize(function(){initNum();});
 97                 var moveMashion=null;
 98                 advBoxObj.bind("mouseover",function(){clearTimeout(moveMashion);}).bind("mouseleave",function(){moveMashion=setInterval(move,options.delay);})
 99                 moveMashion=setInterval(move,options.delay);
100                 move();
101             }
102         });
bubuko.com,布布扣

css代码:

bubuko.com,布布扣
1 .pfAdv{ } 
2 .plCloseDiv{ width:16px; height:16px; background-image:url(pfAdvPicClose.jpg); background-repeat:no-repeat; position:absolute; top:0; right:0; cursor:pointer;} 
3 .plCloseA{ color:#102a49; font-size:14px; font-family:""; text-decoration:none; }
bubuko.com,布布扣

插件的调用:

1 $(function(){
2     $.pfAdv({});
3 })

自己写的jQuery浮动广告插件,布布扣,bubuko.com

自己写的jQuery浮动广告插件

原文:http://www.cnblogs.com/guoyansi19900907/p/3586281.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!