Используя позиционирование слоев, можно в любое время скрывать и показы вать различные области экрана. Можно, например, поместить закрашенный регмон поверх определенного содержимого и постепенно уменьшать этот регион в размерах.
В результате можно организовать появление содержимого в любой интересной форме, подобно презентациям PowerPoint. Хотя в Internet Explorer такие переходы легко реализуются с помощью фильтров, мы хотим, чтобы этот эффект работал в большинстве современных браузеров.
Вот программный код для реализации этого эффекта.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Эффект вытеснения</title>
<meta http-equіv="content-type"
content="text/html; charset=windows-1251" />
<style type="text/css">
<!--
.intro { position:absolute;
left:Opx;
top:Opx;
layer-background-color:red;
background-color:red;
border:0.1px solid red;
z-index:10; }
#message { position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 48pt;
color: green;
z-index: 1;}
-->
</style>
<script type="text/javascript" src="layerlib.js"></script>
</head>
<body>
<div id="leftLayer"> </div>
<div id="rightLayer"> </div>
<div id="message">JavaScript в действии</div>
<script type="text/javascript">
<!--
var speed = 20;
/* Вычисление размеров экрана */
if (window.innerWidth)
theWindowWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
theWindowWidth = document.body.clientWidth;
іf (window.innerHeight)
theWindowHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
theWindowHeight = document.body.clientHeight;
/* мерзкий трюк для работы с документом в IE */
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
theWindowHeight = document.documentElement.clientHeight;
theWindowWidth = document.documentElement.clientWidth;
}
/*размещение слоев на экране */
setWidth('leftLayer', parselnt(theWindowWidth/2));
setHeight('leftLayer1, theWindowHeight);
setX('leftLayer',0);
setWidth('rightLayer', parselnt(theWindowWidth/2));
setHeight('rightLayer', theWindowHeight);
set.X('rightLayer', parselnt(theWindowWidth/2));
clipright = 0;
clipleft = parselnt(theWindowWidth/2);
on openlt () iow.scrollTo(0,0); pright-»—=speed; .t Clip('rightLayer', 0,theWindowWidth, theWindowHeight,clipright); ;pleft-=speed; tClip('leftLayer',0,clipleft,theWindowHeight, 0) ; iclipleft<0) arlnterval(stoplt)
function doTransition ()
{
stopIt=setlnterval("openlt ()",100);
}
window.onload = doTransition;
//-->
</script>
</body>
</html>
Интерес для обсуждения в этом примере представляет метод
setInterval (код, время)объекта Window, используемый для выполнения анимации. Этот метод используется для выполнения определенного программного кода (
код) через определенное число миллисекунд (
время).
Чтобы отключить этот интервальный таймер, следует очистить его обработчик: если вы установили
anlnterval=setlnterval ("alert ('привет')", 1000), то для прекращения появления соответствующего надоедливого окна следует использовать clearlnterval(anlnterval).