看JavaScript如何实现页面自适

有时候,我们可能需要象新版的Yahoo邮箱一样，让一些数据显示块可以根据页面大小进行自适应。事实并不难,但是如果单纯用CSS控制的话,往往不能完全实现我们要的效果,这时候需要借助javascript,Javascript可以让我我们实现司空见怪的自适应页面,在iSunXoft的HR开源项目就应用到.

创新互联建站坚信：善待客户，将会成为终身客户。我们能坚持多年，是因为我们一直可值得信赖。我们从不忽悠初访客户，我们用心做好本职工作，不忘初心，方得始终。十余年网站建设经验创新互联建站是成都老牌网站营销服务商,为您提供成都网站设计、成都做网站、网站设计、H5建站、网站制作、成都品牌网站建设、微信平台小程序开发服务,给众多知名企业提供过好品质的建站服务。

 实现原理：

获取IE显示屏幕的宽高.确定哪些对象是绝对位置是固定的,那些是不固定的,哪些长宽是固定,然后象WIN FORM程序一样,根所软件界面的大小,进行设计相关对象的长宽,绝对位置等属性,但是在WEB上程序没有办法实时检测到窗口大小变化,只能用让实现自适应的方法通过SetTimeout 函数进行隔时递归调用.

下面是摘自iSunXoft Hr开源项目SysForm.aspx实现的方法.

 
 
 
    
  
  
  
  1. var h;  
    2.   
  
  
  2. var w;  
    3.   
  
  
  3. function resize()  
    4.   
  
  
  4. {     
    5.   
  
  
  5.    
    6.   
  
  
  6.  var he = document.body.offsetHeight;  
    7.   
  
  
  7.  var wi = document.body.offsetWidth;  
    8.   
  
  
  8.  if($("DataTable").style.display.toLowerCase()==""||$("DataTable").style.display.toLowerCase()=="inline")  
    9.   
  
  
  9.  {  
    10.   
  
  
  10.   if (h==he&&w==wi)  
    11.   
  
  
  11.   {  
    12.   
  
  
  12.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    13.   
  
  
  13.    {  
    14.   
  
  
  14.     $("DivDataList").style.width = wi - 30;  
    15.   
  
  
  15.    }  
    16.   
  
  
  16.    else  
    17.   
  
  
  17.    {  
    18.   
  
  
  18.     $("DivDataList").style.width = wi - 223;  
    19.   
  
  
  19.    }          
    20.   
  
  
  20.    setTimeout("resize()",1000);  
    21.   
  
  
  21.    return;  
    22.   
  
  
  22.   }  
    23.   
  
  
  23.   h = he;  
    24.   
  
  
  24.   w = wi;  
    25.   
  
  
  25.     
    26.   
  
  
  26.   if (he>100)  
    27.   
  
  
  27.   {  
    28.   
  
  
  28.    $("DivDataList").style.height = he - 172;  
    29.   
  
  
  29.      
    30.   
  
  
  30.   }  
    31.   
  
  
  31.   if(wi>200)  
    32.   
  
  
  32.   {  
    33.   
  
  
  33.    $("DivDataList").style.width = wi - 223;  
    34.   
  
  
  34.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    35.   
  
  
  35.    {  
    36.   
  
  
  36.     $("DivDataList").style.width = wi - 30;  
    37.   
  
  
  37.    }  
    38.   
  
  
  38.   }  
    39.   
  
  
  39.  }  
    40.   
  
  
  40.  
    41.   
  
  
  41.  if($("DataEmpWidows").style.display.toLowerCase()=="inline"||$("DataEmpWidows").style.display.toLowerCase()=="")  
    42.   
  
  
  42.  {  
    43.   
  
  
  43.   if (h==he&&w==wi)  
    44.   
  
  
  44.   {  
    45.   
  
  
  45.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    46.   
  
  
  46.    {  
    47.   
  
  
  47.     $("DataEmpWidows").style.width = wi - 30;  
    48.   
  
  
  48.    }  
    49.   
  
  
  49.    else  
    50.   
  
  
  50.    {  
    51.   
  
  
  51.     $("DataEmpWidows").style.width = wi - 223;  
    52.   
  
  
  52.    }          
    53.   
  
  
  53.   }  
    54.   
  
  
  54.   h = he;  
    55.   
  
  
  55.   w = wi;  
    56.   
  
  
  56.   if (he>150)  
    57.   
  
  
  57.   {  
    58.   
  
  
  58.    $("DataEmpWidows").style.height = he - 132;  
    59.   
  
  
  59.   }  
    60.   
  
  
  60.   if(wi>200)  
    61.   
  
  
  61.   {  
    62.   
  
  
  62.    $("DataEmpWidows").style.width = wi - 223;  
    63.   
  
  
  63.    if($("leftMenu").style.display.toLowerCase() == "none" )  
    64.   
  
  
  64.    {  
    65.   
  
  
  65.     $("DataEmpWidows").style.width = wi - 30;  
    66.   
  
  
  66.    }  
    67.   
  
  
  67.   }  
    68.   
  
  
  68.    
    69.   
  
  
  69.  }  
    70.   
  
  
  70.  if(typeof($("EipWindows")) != "undefined")  
    71.   
  
  
  71.  {  
    72.   
  
  
  72.   //if($("EipWindows").style.display.toLowerCase()=="inline")  
    73.   
  
  
  73.   //{  
    74.   
  
  
  74.   // if (h==he&&w==wi)  
    75.   
  
  
  75.   // {  
    76.   
  
  
  76.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
    77.   
  
  
  77.   //  {  
    78.   
  
  
  78.   //   $("EipWindows").style.width = wi - 30;  
    79.   
  
  
  79.   //  }  
    80.   
  
  
  80.   //  else  
    81.   
  
  
  81.   //  {  
    82.   
  
  
  82.   //   $("EipWindows").style.width = wi - 223;  
    83.   
  
  
  83.   //  }          
    84.   
  
  
  84.   // }  
    85.   
  
  
  85.   // h = he;  
    86.   
  
  
  86.   // w = wi;  
    87.   
  
  
  87.   // if (he>150)  
    88.   
  
  
  88.   // {  
    89.   
  
  
  89.   //  $("EipWindows").style.height = he - 132;  
    90.   
  
  
  90.   // }  
    91.   
  
  
  91.   // if(wi>200)  
    92.   
  
  
  92.   // {  
    93.   
  
  
  93.   //  $("EipWindows").style.width = wi - 223;  
    94.   
  
  
  94.   //  if($("leftMenu").style.display.toLowerCase() == "none" )  
    95.   
  
  
  95.   //  {  
    96.   
  
  
  96.   //   $("EipWindows").style.width = wi - 30;  
    97.   
  
  
  97.   //  }  
    98.   
  
  
  98.   // }      
    99.   
  
  
  99.   //}  
    100.   
  
  
  100.  }  
    101.   
  
  
  101.  setTimeout("resize()",1000);  
    102.   
  
  
  102. }  
    103.   
  
  
  103. resize(); 
    104.

注:$("")是有变化的元素.

然后就在网页上调用resize();一旦窗口大小有变化,或是分辩率有变化,都能确保能够实现真正意义上的自适应.

原文链接：http://edu.itbulo.com/200701/111570.htm

网页题目：看JavaScript如何实现页面自适
本文网址：http://www.mswzjz.cn/qtweb/news45/529095.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

外贸建站知识

行业网站建设

wap网站建设　　 　绵阳网站制作　　 　电子商务商城网站　　 　重庆网站建设　　 　服务器租用　　 　网站建设改版　　 　绵阳电信服务器托管　　 　香港云主机　　 　四川珉田机房　　 　营山月子护理　　 　网站空间　　 　成都门窗定制　　 　高端定制网站建设　　 　交互设计　　 　网站制作　　 　电商网站建设　　 　成都品牌网站建设　　 　达州网站建设　　 　成都全网营销　　 　富顺网站建设