::Динамический HTML:: |
![]() |
Введение Различия в реализации Например для IE: <head> <style type="text/css"> #loading
{POSITION: absolute; TOP:0; LEFT:0; Z-INDEX: 80000; WIDTH: 100%; HEIGHT: 100%;} </style>
</head> <body> <div id="loading"> <table width="100%"
height="100%"> <tr><td align="center" valign="middle">
Еще немного и из-за поворота выглянет то, к чему Вы так стремились... </td></tr>
</table> </div> </body> <body> <layer name="loading" left="0"
top="0" z-index="80000" width="100%" height=100%">
<table width="100%" height="100%"> <tr><td align="center"
valign="middle"> Еще немного и из-за поворота выглянет то, к чему Вы
так стремились... </td></tr> </table> </layer> </body>
На этом проблемы совместимости не заканчиваются, а только начинаются. Классы JavaScript в IE и NC также реализованны по разному. Например, чтобы показать слой в NC надо сказать: document.layers["loading"].visibility="visible";
document.all["loading"].style.visibility="visible";
Как с ними бороться eval(layerRef+'["loading"]'+styleSwitch+'.visibility="visible"');
var layerRef="null", styleSwitch="null";
function init(){ if (navigator.appName == "Netscape") { layerRef="document.layers";
styleSwitch=""; }else{ layerRef="document.all"; styleSwitch=".style";
} } <body onload="init();"> Прятание и показывание слоя function hideLayer(layerName){ eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
} function showLayer(layerName){ eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
} <style type="text/css"> #loading {POSITION:
absolute; TOP:0; LEFT:0; Z-INDEX: 80000; WIDTH: 100%; HEIGHT: 100%;} </style>
<div id="loading"> <table width="100%" height="100%">
<tr><td align="center" valign="middle"> Подождите
пожалуйста... </td></tr> </table> </div> <style type="text/css"> #logo {POSITION:
absolute; TOP:50; LEFT:150; VISIBILITY: hidden; Z-INDEX: 84000; WIDTH: 360px; HEIGHT:
280px;} </style> <div id="logo"> <img src="../images/biglogo.gif"
width=359 height=279 border=0> </div> <body onload="init();hideLayer('loading');showLayer('logo');">
Движение слоя по окну Создадим функцию перемещения function moveLayerDown(layerName,currTop,topstop) if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top
!= topstop')) currTop+=2; eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top
= currTop'); setTimeout('moveLayerDown("'+layerName+'",'+currTop+','+topstop+')',50);
function moveLayerDown(layerName,currTop,topstop){ if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top
!= topstop')){ currTop+=2; eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.top
= currTop'); setTimeout('moveLayerDown("'+layerName+'",'+currTop+','+topstop+')',50);
} } Свертывание и развертывание слоя Создадим функцию свертки/развертки: function curtainWidth(layerName,xinc,inctime,stopwidth)
Первым делом изменим левый и правый край области обреза: eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.left
+= -(xinc/2)'); eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.right
+= (xinc/2)'); if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width
< 0')){lyr.clip.width = 0} if (((xinc < 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width
> stopwidth'))) || ((xinc > 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width
< stopwidth')))) setTimeout('curtainWidth("'+layerName+'",'+xinc+','+inctime+','+stopwidth+')',inctime);
function curtainWidth(layerName,xinc,inctime,stopwidth)
{ eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.left += -(xinc/2)');
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.right += (xinc/2)');
if (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width < 0')){lyr.clip.width
= 0} if (((xinc < 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width
> stopwidth'))) || ((xinc > 0) && (eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.clip.width
< stopwidth')))) { setTimeout('curtainWidth("'+layerName+'",'+xinc+','+inctime+','+stopwidth+')',inctime);
} }
|
Copyright © 2003 http://sid.com.ru
|