zoukankan      html  css  js  c++  java
  • 【】js 获取windown窗体属性

    if(!coos)var coos = function(){};
    if(!coos.browser)
    {
     coos.userAgent = navigator.userAgent.toLowerCase();
     coos.browser = {
      version: (coos.userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1],
      safari: /webkit/.test(coos.userAgent),
      opera: /opera/.test(coos.userAgent),
      msie: /msie/.test(coos.userAgent) && !/opera/.test(coos.userAgent),
      mozilla: /mozilla/.test(coos.userAgent) && !/(compatible|webkit)/.test(coos.userAgent)
     };
    }
    coos.window = function(){};
    coos.window.winWidth  = 0;
    coos.window.winHeight = 0;

    /**
     * 获取屏幕宽度的函数,在非xhtml标准页面下有可能有问题
     */
    coos.window.width = function()
    {
     if (window.innerWidth)//for Firefox
     {
      coos.window.winWidth = window.innerWidth;
     }
     else if((document.body) && (document.body.clientWidth))
     {
      coos.window.winWidth = document.body.clientWidth;
     }

     if (document.documentElement && document.documentElement.clientWidth)
     {
      coos.window.winWidth = document.documentElement.clientWidth;
     }
     return coos.window.winWidth;
    };

    /**
     * 获取屏幕高度的函数
     * html,body高度属性必须设值为height:100%否则在火狐浏览器下获取不到真实高度
     */
    coos.window.height = function()
    {
     if (window.innerHeight)//for Firefox
     {
      coos.window.winHeight = window.innerHeight;
     }
     else if((document.body) && (document.body.clientHeight))
     {
      coos.window.winHeight = document.body.clientHeight;
     }

     if (document.documentElement  && document.documentElement.clientHeight)
     {
      coos.window.winHeight = document.documentElement.clientHeight;
     }
     return coos.window.winHeight;
    };

    /**
     * 获取滚动条横向宽度
     */
    coos.window.scrollWidth = function()
    {
     return document.body.scrollWidth + "px";
    };

    /**
     * 获取滚动条竖向高度,取body.scrollHeight和documentElement.scrollHeight中最高的一个
     */
    coos.window.scrollHeight = function()
    {
     return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + "px";
    };

    coos.window.onscroll = function(){};

    /**
     * window.onscroll绑定事件
     * @param fn 需要绑定的function
     */
    coos.window.onscroll.add = function(fn)
    {
     if (window.addEventListener)
     {
      window.addEventListener("scroll",fn,false);
     }
     else
     {
      window.attachEvent("onscroll", fn);
     }
    };

    /**
     * 删除window.onscroll绑定事件
     * @param fn 需要绑定的function
     */
    coos.window.onscroll.remove = function(fn)
    {
     if (window.removeEventListener)
     {
      window.addEventListener("scroll",fn,false);
     }
     else
     {
      window.detachEvent("onscroll", fn);
     }
    };

    /**
     * window.onload绑定事件
     * @param fn 需要绑定的function
     */
    coos.window.onload = function(fn)
    {
     if (window.addEventListener)
     {
      window.addEventListener("load",fn,false);
     }
     else
     {
      window.attachEvent("onload", fn);
     }
    };

    /**
     * 让元素显示在屏幕中间,元素必须是绝对定位的
     * @param obj 要显示的对象,改变top left 属性值
     * @param event 触发的事件,在有滚动条的情况下必须传入事件以获取当时所在的滚动条高度
     * @example
    <style type="text/css">
      html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}
       </style>
        <script type="text/javascript"> 
     function show(event)
     {
      var obj = document.getElementById("showDiv");
      coos.window.center(obj,event);
      //元素在屏幕中间距离顶部的高度
      var top = coos.window.center.top(obj);
      //固顶在屏幕上,不随滚动条变化
      coos.window.fixed.set(obj,top);
      coos.window.fixed();
     }
        </script>
     <div id="showDiv" style="position:absolute;left:20px;top:5px;height:20px;400px;border:2px solid #ccc;text-align: center;clear: both;">
      I'm a div,I can show and fixed in center!
     </div>
     <div style="clear: both;margin:80px;height:1000px;">
      <br /><br />
      <a href="javascript:void(0)" onclick="show(event)">show div center</a>
     </div>
     */
    coos.window.center = function(obj,event)
    {
     var e = event || window.event;
     if(e)
     {
      obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";
      var objh = (parseInt(obj.style.height,10)/2).toFixed();
      var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);
      var wh = parseInt((coos.window.height()/2).toFixed(),10);
      var ch = sh + wh;
      obj.style.top  = (ch - objh) + "px";
     }
     else
     {
      obj.style.left = ((coos.window.width() - parseInt(obj.style.width,10))/2).toFixed() + "px";
      obj.style.top  = ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed() + "px";
     }
    };

    /**
     * 获取屏幕中间显示距离顶部的高度
     */
    coos.window.center.top = function(obj)
    {
     return ((coos.window.height() - parseInt(obj.style.height,10))/2).toFixed();
    };

    /**
     * 固顶元素在屏幕中显示,不随滚动条的变化而变化
     */
    coos.window.fixed = function()
    {
     coos.window.onscroll.add(coos.window.fixed.bind);
    };

    /**
     * 绑定需要固顶高度的元素window.onscroll事件
     */
    coos.window.fixed.bind = function()
    {
     if(!coos.window.fixed.obj || !coos.window.fixed.top)
     {
      return;
     }
     var objs = coos.window.fixed.obj;
     var tops = coos.window.fixed.top;
     var len = objs.length;
     //ie6.0以下不支持position:fixed;属性
     if(coos.browser.msie && parseInt(coos.browser.version) <= 6)
     {
      for(var i = 0; i < len;i++)
      {
       var sh = parseInt(Math.max(document.body.scrollTop,document.documentElement.scrollTop),10);
       objs[i].style.top = (sh + tops[i]) + "px";
      }
     }
     else
     {
      for(var i = 0; i < len;i++)
      {
       objs[i].style.position = "fixed";
       objs[i].style.top = tops[i] + "px";
      }
      //设置完position:fixed;属性和top属性后移除onscroll事件
      coos.window.onscroll.remove(coos.window.fixed.bind);
     }
    };

    /**
     * 设置需要固定高度的元素
     * @param obj 需要固定高度的元素对象
     * @param top 需要固定高度的元素距离顶部的高度
     */
    coos.window.fixed.set = function(obj,top)
    {
     if(!coos.window.fixed.obj)
     {
      coos.window.fixed.obj = new Array();
     }
     coos.window.fixed.obj.push(obj);
     
     if(!coos.window.fixed.top)
     {
      coos.window.fixed.top = new Array();
     }
     top = parseInt(top,10);
     coos.window.fixed.top.push(top);
    };

    -------------------------------------------------------------------------------------------------------------------------

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
        <title>coos.extend.window Build Test Page</title> 
     <script type="text/javascript" src="coos.extend.window.js"></script>
    </head> 
        <body>
     <style type="text/css">
      html,body {margin: 0; padding: 0;height:100%;font-size: 14px;}
       </style>
        <script type="text/javascript"> 
     function show(event)
     {
      var obj = document.getElementById("showDiv");
      coos.window.center(obj,event);
      //元素在屏幕中间距离顶部的高度
      var top = coos.window.center.top(obj);
      //固顶在屏幕上,不随滚动条变化
      coos.window.fixed.set(obj,top);
      coos.window.fixed();
     }
        </script>
     <div id="showDiv" style="position:absolute;left:20px;top:5px;height:20px;400px;border:2px solid #ccc;text-align: center;clear: both;">
      I'm a div,I can show and fixed in center!
     </div>
     <div style="clear: both;margin:80px;height:1000px;">
      <br /><br />
      <a href="javascript:void(0)" onclick="show(event)">show div center</a>
     </div>
    </body> 
    </html> 

  • 相关阅读:
    linux基础指令(下)
    Linux基础命令(中)
    wtforms校验组件
    Linux基础命令(上)
    Scrapy
    SQLAlchemy
    自定义命令
    flask-session
    解决Failed to allocate memory: 8转
    如何做需求
  • 原文地址:https://www.cnblogs.com/fx2008/p/2248466.html
Copyright © 2011-2022 走看看