|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
这个例子是用JS剧本把持并列DIV的高度,一般在DIV结构中,自顺应高度一向是对照头疼的成绩,一样平常多数接纳背景图、外衣DIV、右栏掩盖左栏......来办理。如今加了剧本后,复杂多了,假设有三个程度并列的DIV,fbox、mbox、sbox,只需在<body>标签中写进:onload="P7_equalCols(fbox,mbox,sbox)",测试前提:ie5.x、ie6.0、FF1.03、NS7.2、opera8.01最后的效果.htm
JS代码:版权回原作者,仅供进修研讨.
以下是援用片断:
/*
------------------------------------------------
PVIIEqualCSSColumnsscripts
Copyright(c)2005ProjectSevenDevelopment
www.projectseven.com
Version:1.5.0
------------------------------------------------
*/
functionP7_colH(){//v1.5byPVII-www.projectseven.com
vari,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;if(dA&&dA.length){
for(i=0;i<dA.length;i++){dA[i].style.height=auto;}for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;}for(i=0;i<dA.length;i++){if(an){
dA[i].style.height=h+px;}else{P7_eqA(dA[i].id,dA[i].offsetHeight,h);}}if(an){
for(i=0;i<dA.length;i++){hh=dA[i].offsetHeight;if(hh>h){
dA[i].style.height=(h-(hh-h))+px;}}}else{document.p7eqa=1;}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;}
}
functionP7_eqT(){//v1.5byPVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();}
}
functionP7_equalCols(){//v1.5byPVII-www.projectseven.com
if(document.getElementById){document.p7eqc=newArray;for(i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);}setInterval("P7_eqT()",10);}
}
functionP7_eqA(el,h,ht){//v1.5byPVII-www.projectseven.com
varsp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;varad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+px;
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+px;}
if(nh<adT){setTimeout("P7_eqA("+el+","+nh+","+ht+")",sp);}
}
</p>
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。 |
|