javascript适应不同分辨率的导航栏

 

转自：http://cache.baidu.com/c?m=

9d78d513d9d430dc4f9d94697c17c0161f4

381132ba7d7020fa58438e0732b37506793ac56200774d9d27c1

616de3a4b9b832104361453b38cc9f85daccb855c249f5135676a845613a30e

dfce5153c537e059fed81df0cbf025e2ddc6949f0a5c9015433897f1f8471d449432a

5033194e7c214464810cdbc6d3ae8590078c33e01ab17a7bd677900f5f1d70f4fc228d

a361394ad37b23454eb04a46841621bfe&p=84759a45d19d50e507a8c7710957&user=baidu

 

jsp javascript适应不同分辨率的导航栏

2007-06-21　22:51:35

大中小

    在线货物追踪系统(http://huayou.vicp.cc)在设计时,我用了1024×768的分辨率,结果很多客户还是800×600的分辨率,这样,不仅广告会占用位置(不过单击就关闭了),并且"报价服务"和"货物追踪"的下拉列表会忽前忽后.在网上搜了一段时间,大多都是用替换文件的方法来实现的,但我这里是在每个JSP文件中用jsp:include来实现的,必须在导航文件中解决问题.

    解决思路是:用javascript来输入层的CSS,只需动态的改变left的值即可,简单吧,还让自己忙了那么久!

...

<style type="text/css">
<!--
body {
 margin-top: 0px;
 background-image: url(img/logoback.gif);
 background-color: #999999;
}
-->
</style>
<script type="text/JavaScript">
document.write('<style type="text/css">');
document.write('#s1024 {');
document.write('position:absolute;');
document.write('left:');
document.write(455-(1024-screen.width)/2);
document.write('px;');
document.write('top:143px;');
document.write('width:82px;');
document.write('height:63px;');
document.write('z-index:1;');
document.write('background-color: #0C01D1;');
document.write('visibility: hidden;');
document.write('}');
document.write('#t1024 {');
document.write('position:absolute;');
document.write('left:');
document.write(525-(1024-screen.width)/2);
document.write('px;');
document.write('top:142px;');
document.write('width:92px;');
document.write('height:43px;');
document.write('z-index:2;');
document.write('background-color: #0C01D1;');
document.write('visibility: hidden;');
document.write('}</style>');
</script>

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<div id="s1024">
  <table width="80" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="airprice.jsp"> 空运报价</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF" ></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="expressprice.jsp"> 快递报价</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF" ></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"><a href="takedelivery.jsp"> 香港派送费</a></td>
    </tr>
  </table>
</div>
<div id="t1024">
  <table width="90" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"> <a href="airtracke.jsp">空运追踪</a></td>
    </tr>
    <tr>
      <td height="1" bgcolor="#FFFFFF"></td>
    </tr>
    <tr>
      <td height="20" background="img/tb.gif" class="daohang1"> <a href="customer.jsp">中港快递追踪</a></td>
    </tr>
  </table>
</div>

.

.

.

<a href="netorder.jsp">网上订单</a> | <a href="#" onclick="MM_showHideLayers('s1024','','show','t1024','','hide')">服务报价</a> |
    <a href="#" onclick="MM_showHideLayers('s1024','','hide','t1024','','show')">货物追踪</a>