效果图:
文件位置摆放:
插件的js代码:
1 $.extend({ 2 pfAdv:function(options){ 3 var defaults={ 4 count:1, 5 startTop:200, 6 startLeft:200, 7 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&¤tY<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&¤tX<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 })