• 自己写的jQuery浮动广告插件


    效果图:

    文件位置摆放:

    插件的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&&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 })
  • 相关阅读:
    C++面向对象高级编程(下)第二周-Geekband
    C++面向对象高级编程(下)第一周-Geekband
    C++面向对象高级编程(下)-Geekband
    堆,栈,内存管理, 拓展补充-Geekband
    C++面向对象高级编程(上)-Geekband
    MFC 多屏显示
    Open CASCADE Technology: IGES Support
    JAVA反射
    HashMap
    Linux 系统编程
  • 原文地址:https://www.cnblogs.com/guoyansi19900907/p/3586281.html
Copyright © 2020-2023  润新知