自己写的jQuery浮动广告插件

效果图:

文件位置摆放:

插件的js代码:

 $.extend({
             pfAdv:function(options){
                 var defaults={
                     count:1,
                     startTop:200,
                     startLeft:200,
                     width:140,//ͼƬС
                     height:180,
                     imageSrc:"pfAdvPic.jpg",
                     step:1,
                     delay:30,
                     idStr:"pfAdv"
                 }
                 options= $.extend(defaults,options);
                 var html="";
                 html+="<div id="+options.idStr+" class='pfAdv'>";
                 html+="<div class='plCloseDiv'></div>";
                 html+="<div><img src="+options.imageSrc+"></div>";
                 html+="</div>";
                 $("body").append(html);//html
                 var advBoxObj=$("#"+options.idStr);//
                 advBoxObj.css({"position":"absolute","z-index":998}).width(options.width).height(options.height);//涨λ
                 $("img",advBoxObj).width(options.width).height(options.height);
                 var advH=advBoxObj.outerHeight();//ĸ߶
                 var advW=advBoxObj.outerWidth();//Ŀ
                 var advMaxTop=0;//top
                 var advMaxLeft=0;//left
                 var stepMashionX=1;//1,ʾˮƽstep,-1ʾˮƽstep
                 var stepMashionY=1;//1,ʾֱstep,-1ʾֱstep
                 var currentX=0;//ǰλ
                 var currentY=0;
                 var divToBrowTop=options.startTop;
                 var divToBrowLeft=options.startLeft;
                 function getScroll(){
                     var scrollTop=$(window).scrollTop();//뿪߶
                     var scrollLeft=$(window).scrollLeft();//
                     return {x:scrollLeft,y:scrollTop};
                 }
                 function move(){
                     var browW=$(window).width();//
                     var browH=$(window).height();//߶
                     var scroll=getScroll();
                     currentX=divToBrowLeft+scroll.x;//top
                     currentY=divToBrowTop+scroll.y;//left
                     advMaxTop=browH-advH+scroll.y;//top,
                     advMaxLeft=browW-advW+scroll.x;//left,

                     if(currentY>=advMaxTop){
                         stepMashionY=-1;
                         currentY=divToBrowTop-options.step;
                     }
                     else if(currentY>scroll.y&&currentY<advMaxTop){
                         if(stepMashionY==-1)
                             currentY=divToBrowTop-options.step;

                         else if(stepMashionY==1)
                             currentY=divToBrowTop+options.step;
                         else alert("ֱϵstepMashionY");
                     }
                     else if(currentY<=scroll.y){
                         stepMashionY=1;
                         currentY=divToBrowTop+options.step;
                     }
                     else {
                         alert("ֱϱȽ");
                     }
                     if(currentX>=advMaxLeft){
                         stepMashionX=-1;
                         currentX=divToBrowLeft-options.step;
                     }
                     else if(currentX>scroll.x&&currentX<advMaxLeft){
                         if(stepMashionX==-1){
                             currentX=divToBrowLeft-options.step;
                         }
                         else if(stepMashionX==1){
                             currentX=divToBrowLeft+options.step;
                         }
                         else alert("ˮƽϵstepMashionX")
                     }
                     else if(currentX<=scroll.x){
                         stepMashionX=1;
                         currentX=divToBrowLeft+options.step;
                     }
                     else {
                         alert("ˮƽϱȽ");
                     }
                     divToBrowLeft=currentX;
                     divToBrowTop=currentY;
                     //var scroll=getScroll();
                     currentX+=scroll.x;
                     currentY+=scroll.y;
                     advBoxObj.css({top:currentY+"px",left:currentX+"px"});
                 }
                 $(".plCloseDiv",advBoxObj).on("click",function(){advBoxObj.remove()})
                 //$(window).resize(function(){initNum();});
                 var moveMashion=null;
                 advBoxObj.bind("mouseover",function(){clearTimeout(moveMashion);}).bind("mouseleave",function(){moveMashion=setInterval(move,options.delay);})
                 moveMashion=setInterval(move,options.delay);
                 move();
             }
         });

css代码:

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

插件的调用:

 $(function(){
     $.pfAdv({});
 })