上下限-板块浮动插件

来源：互联网发布：windows vista和win7 编辑：程序博客网时间：2024/06/08 03:13
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <script src="../jquery-3.2.1.min.js"></script>          <!--必要:  引入jquery-->    <style>     /*测试css*/        *{  margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}        header{  width: 100%;height: 150px;}        .body{  border: 1px solid #000;height: 3000px; }        footer{  width: 100%;height: 100px;}        .float div{  height: 100%; width: 200px; background-color: rgba(255,5,5,.3);  } /*浮动节点的子孙元素css*/    </style></head><body>    <header></header>    <div class="body">        <div class="float">            <div>                <h1>名称:  上下限浮动封装</h1>                <h3>用法:  使用dom节点引用插件[浮动区域的宽高为窗口宽高]</h3>                <p >备注:  引用的节点在jquery中已经写好css,只需要对其子孙元素添加css</p>                <p >备注:  插件的浮动范围在父级容器范围内,父级会自动添加最小高度为窗口高度</p>                <h6>必要:  注意引入jquery</h6>            </div>        </div>    </div>    <footer></footer></body></html><script>    (function () {        $.fn.float = function () {      var fn = this;  var par = this.parent();     //开发者: 刘武星            this.css({display:'block',position:'fixed',width:'100%',height:'100%',overflow:'hidden',visibility:'collapse'});   //当前css            this.children().css('visibility','visible');        //子级显示            $(window).resize(function () {                      //窗口事件                $(par).css({'min-height':$(fn).height()});       //父元素最小高度                $(fn).css({top:$(par).offset().top});            });$(window).resize();            $(window).scroll(function () {                      //滚动事件                var min = $(par).offset().top,max = (min+$(par).height())-$(fn).height(),do_t = $(document).scrollTop();    //变量 上限-下限-当前                if(do_t<min){ $(fn).css('top',min-do_t);}                else if(do_t>max){ $(fn).css('top',max-do_t); }                else{ $(fn).css('top','0'); }            });$(window).scroll();        }    })(jQuery);    $('.float').float();//引用插件</script>
阅读全文
0 0
上下限-板块浮动 插件

上下限-板块浮动插件
