zoukankan      html  css  js  c++  java
  • Jquery插件浮动广告

     前几天工作中碰到一个在页面中显示浮动广告的功能,这类js代码实在很多,所以打算在网上找个代码复制一下就OK了,找了半天却没有找到合适的。

    虽然这些代码都可以实现浮动层显示在屏幕的固定位置,并随着窗口滚动而滚动,但是现在显示器普遍比较大,页面内容只能显示在屏幕的中央,当浮动广告在左侧或右侧时,只能设置离窗口边框的距离,于是离内容区很远。我想实现浮动层能正好在内容区域的边上。

    找了两三个小时也没有找到合适的,一生气自己写了一个,只费了半个小时,呵呵。

    代码如下:

    //设置浮动块
    //element:浮动窗的id
    //position:基准位置,选项left、right或center,窗口左侧还是右侧,还是中心;默认是left
    //distance:距离,离基准位置的距离,可以为正负值
    //top:离窗口顶的距离
    jQuery.fn.FloatBox=function(element,position,distance,top){
     if(typeof(element)=="string")element=$(element); 
     if(element.size()<1)return;
     //初始化一些值
     position=position!=null && position!="" ? position : "left";
     distance=distance!=null ? distance : $(window).width()/2;
     top=top!=null ? top : 0;
     //计算浮动窗体在左侧位置(坐标)
     var left= 0;
     if(position=="left")left=distance;
     if(position=="right")left=$(window).width()-distance-element.width();
     if(position=="center")left=distance>0 ? $(window).width()/2+distance : $(window).width()/2+distance-element.width();
     //设置浮动窗的属性,主要是设置坐标
     element.css({position: "absolute",
        "z-index": 20001,
        left: left,
        top: top});
     $(window).scroll(function (){
      var offsetTop = $(window).scrollTop();
      element.animate({top : offsetTop+top },{ duration:500 , queue:false });
     })
    }

    上述代码可以实现浮动块居左,还是居右,还是居中;当居中时,可以设置distance的偏差值,如网页的内容区域是1000px,则设置-500时浮动块正好显示在内容区的左侧。

    如下例代码:

    $(document).ready(function(){
     $().FloatBox("#Ols","center",-520,140);
     $().FloatBox("#qrcode","center",520,140);
    });

    设置了两个浮动块,一个在内容的左侧,一个在内容的右侧;

     

     

    我测试了一下,在IE6、Firefox、Chrome中都正常,其它浏览器没有测试。

    我个人感觉使用还算方便,不过也有一些欠缺,例如现在只是考虑到的左右的位置,没有考虑诸如固定左下角、右下角之类的位置。还好代码并不复杂,有兴趣的朋友可以完善一下。

     

  • 相关阅读:
    POJ 2723 Get Luffy Out(2-SAT)
    ZOJ 3613 Wormhole Transport
    HDU 4085 Peach Blossom Spring
    NBUT 1221 Intermediary
    NBUT 1223 Friends number
    NBUT 1220 SPY
    NBUT 1218 You are my brother
    PAT 1131. Subway Map (30)
    ZSTU OJ 4273 玩具
    ZSTU OJ 4272 最佳淘汰算法
  • 原文地址:https://www.cnblogs.com/2hill/p/3130126.html
Copyright © 2011-2022 走看看