首页 > 编程语言 > 详细

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

时间:2014-12-10 17:55:41      阅读:236      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:http://www.cnblogs.com/beiou/p/4155740.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!