首页 > 网站 > WEB开发 > 正文

javascript实现页面自适应reset可见区域高度

2024-04-27 14:15:39
字体:
来源:转载
供稿:网友

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);        }    }


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表