healer
Администратор
Из:Москва
Сообщения:24467
|
<div id="dialogWindow">
А сейчас рассмотрим свойство clip,
изменение которого и дает нужный нам эффект сворачивания/разворачивания.
Данное свойство определяет, так называемую, область усечения.
</div>
<script type="text/javascript">
var curtainStep = 3; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности
//текущее количество обрезаемых пикселей слоя слева и справа
var curtainLeft = 150;
var curtainRight = 150;
var curtainWidth = 300;//ширина слоя
//ф-ция разворачивания слоя
function curtainOpen()
{
if (curtainLeft > 0)//Пока левая граница области усечения не достигла левой границы слоя
{
curtainRight += curtainStep; //раскрываем область усечения справа на curtainStep пикселей
curtainLeft -= curtainStep; //раскрываем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainOpen,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
//ф-ция сворачивания слоя
function curtainClose()
{
if (curtainLeft<curtainRight)//Пока левая граница области усечения не встретилась с правой
{
curtainRight -= curtainStep; //сужаем область усечения справа на curtainStep пикселей
curtainLeft += curtainStep; //сужаем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainClose,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
curtainOpen();
setTimeout(curtainClose,5000);
</script>
~~~~~~~~~~~~
Здоровья Вам. Духовного и физического.
|
