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);
        }
    }
时间: 2024-11-05 15:49:17

javascript实现页面自适应reset可见区域高度的相关文章

JavaScript实现页面滚动到div区域div以动画方式出现

用JavaScript实现页面滚动到div区域div以动画方式出现CSS动画 页面滚动到一块区域,改区域以动画方式出现实现这个效果需要二点:一我们要先写好一个css动画,二:用js的监听页面滑动的距离在给div添加动画 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> img { width: 1

javascript 获取页面高度(多种浏览器)(转)

关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s += " 网页可见区域高:"+ document.body.clientHeight; s += " 网页可见区域宽:"+ document.body.offsetWidth + " (

JavaScript提高:003:easy UI实现tab页面自适应问题

前面说到使用easyUI在asp.net中实现了tab控件效果.http://blog.csdn.net/yysyangyangyangshan/article/details/38307477不过有一个问题,div的宽度太宽了,而且不随页面变化而改变.网上搜索了下,发现很多人也碰到过,而且也有解决的办法.下面看看吧.实现tab的部分代码如下:引用的easyui文件参考上文. <div id="tabTop" class="easyui-tabs"> &

Javascript 获取页面高度(多种浏览器)

关于获取各种浏览器可见窗口大小的一点点研究. 在我本地测试当中:在IE.FireFox.Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得,很简单,很方便.而在公司项目当中:Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.do

javascript 获取页面的高度及滚动条的位置的代码

http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载 javascript获取页面的高度及滚动条的位置的代码,需要的朋友可以参考下. 复制代码代码如下: var Viewport={ top : function(){ return window.pageYOffset || document.documentElement && document.documentEl

初试swiper插件(一)-让页面自适应高度

当我使用这个插件时发现不可以在每一节上写上height:auto或者height:100%,如果使用这样的确可以让页面自适应高度,但是分页器会不显示在页面的的中间,而且并不是每一页的显示. 如: 此时应该要给swiper-container类  设置如下即可. .swiper-container { width: 100%; height: 100%; } 完成! 原文地址:https://www.cnblogs.com/ZwjFronTend/p/broken_life.html

【转载】实用的Javascript获取网页屏幕可见区域高度

本文转载原地址:这里 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clientHeight ==> BODY对象高度 3 document.documentElement.clientWidth ==> 可见区域宽度 4 document.documentElement.clientHeight ==> 可见区域高度 5 6 网页可见区域宽: document.body.clientWidth 7 网页可见区域高

JavaScript 刷新页面代码(汇总)

1. 页面设置自动刷新 <meta http-equiv="refresh"content="10;url=想要跳转的页面"> 注:10 表示间隔10秒刷新一次 2. 利用JavaScript加载刷新 1)<script type=''text/javascript''>window.location.reload(true);</script> 注:利用JavaScript的window事件进行对应的操作,若要刷新某一个ifra

微信公众平台开发 - 页面自适应

通过以下标签实现页面自适应: <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [ye