zoukankan      html  css  js  c++  java
  • javascript实现页面自适应reset可见区域高度

    1、该功能只适用于需要页面自动撑满或缩小到可见区域,并且只对单个主体改变高度的需求。

    var ResetControl = function (pTask) {
            var _task = pTask || [],
                _isLock = false,            
                bindEvent = function(){
                    var me = this;
                    $(window).bind('resize.reset', function (event) {
                        fire.call(me);
                        if (_task.length === 0) {
                            $(window).unbind('resize.reset', arguments.callee);
                        }
                    });
                }, fire = function () {
                        //当前页面可见高度
                    var _iHeight = Math.min(window.innerHeight, document.documentElement.clientHeight),
                        //页面整体高度
                        _wHeight = Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.body.clientHeight, document.body.scrollHeight),
                        //页面整体实际高度
                        _bHeight = document.body.offsetHeight,
                        _resetHeight = 0;
                    if (_iHeight > _bHeight) {
                        //当前页面可见高度 - 页面整体实际高度
                        _resetHeight = _iHeight - _bHeight;
                    } else {
                        //当前页面可见高度 - 页面整体高度
                        _resetHeight = _iHeight - _wHeight;
                    }
                    for(var i = 0,l = _task.length;i < l;i++){
                        var _h = _task[i][0].offsetHeight;
                        _h = (_h + _resetHeight) < 200 ? 200 : (_h + _resetHeight);
                        _task[i].css("height", _h + "px");
                    }
                }
            this.push = function(pItem){
                _task.push(pItem);
            }
            this.init = function(){
                setTimeout(function () {
                    fire();
                    bindEvent();
                }, 100);
            }
        }
  • 相关阅读:
    表格维护:弹出
    表格联动
    表单查询
    浅谈分治 —— 洛谷P1228 地毯填补问题 题解
    The Captain 题解
    网课集训记
    2020-1-20寒假集训记
    博客使用声明
    JZOJ P5829 string 线段树
    线段树--CF438D The Child and Sequence
  • 原文地址:https://www.cnblogs.com/beiou/p/4155740.html
Copyright © 2011-2022 走看看