Добавляем...


Простые переходные эффекты
Используя позиционирование слоев, можно в любое время скрывать и показы вать различные области экрана. Можно, например, поместить закрашенный регмон поверх определенного содержимого и постепенно уменьшать этот регион в размерах. В результате можно организовать появление содержимого в любой интересной форме, подобно презентациям 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" class="intro">&nbsp;</div>
<div id="rightLayer" class="intro">&nbsp;</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).
назад:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика