Библиотека Javascript SE@RCHER

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Линк плавного открытия блока внутри окна</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<script  type="text/javascript">
var curtainStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности
//текущее количество обрезаемых пикселей слоя слева и справа
var curtainLeft = 150;
var curtainRight = 500;
var curtainWidth = 500;//ширина слоя
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 миллисекунд
}}
function clipImg(on)
{
document.getElementById("clipEx1").style.clip=on?'rect(78px 146px 183px 84px)':'rect(auto,auto,auto,auto)';
}
</script>
<style type="text/css">
#dialogWindow {
	width: 500px;
	position: absolute;
	clip: rect(auto 350px auto 350px);

left: 30%;
	margin-left: -350px;
	background-color: #FFFFCC;
}
.dBody {
	text-align: center;
	margin: 0;
	padding: 10px 5px;
	border: 1px solid #ccc;
}
.dTitle {
	font-weight: bold;
	margin: 0;
	padding: 5px;
	border: 1px solid #ccc;
	background-color: #CCFFFF;
}
</style>
</head>
<body>
<p><a href="javascript:curtainOpen()" class="strong">Смотрите пример.</a></p>
<div id="dialogWindow" onClick="curtainClose()">
<button style="clear:both; margin-top:10px;" type="button" onClick="curtainClose()">Закрыть окно</button></p>
<div class="dTitle">Диалоговое окно 1</div>
<p class="dBody">
<img src="http://www.03www.su/pic2/006.jpg" width="500px" alt="">
Текст сообщения для пользователя. 
</div>
</body>  
</html>