自己写的jQuery浮动广告插件

效果图:

文件位置摆放:

插件的js代码:

  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         });

css代码:

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; }

插件的调用:

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

 

posted @ 2014-03-07 13:48  思思博士  阅读(671)  评论(2)  编辑  收藏  举报