Эффекты на основе Java Script

Открытие одной картинки под другой(Эффект "До" - "После")

	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/js/jquery.min.js" type=text/javascript></SCRIPT> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/js/jquery-ui.min.js" type=text/javascript></SCRIPT> <SCRIPT type=text/javascript> var cwet_razdela = "#ff0000"; // цвет разделительной полосы var ssylka_do = "ДО полностью"; // текст ссылки ДО var ssylka_posle = "ПОСЛЕ полностью"; // текст ссылки ПОСЛЕ var razdel = "http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/handle.gif"; // адресс картинки разделителя var ukaz_left = "http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/lt-small.png"; // адресс картинки левого указателя var ukaz_right = "http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/rt-small.png"; // адресс картинки правого указателя $(function(){ $('#container').beforeAfter(); // определяются и задаются все Ваши активные блоки с картинками $('#container1').beforeAfter(); }); </SCRIPT> <SCRIPT src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/js/jquery.beforeafter1.js" type=text/javascript></SCRIPT> <STYLE> /* стиль ссылок управления */ a:visited.sknop {text-decoration:none; color:#00ffff; font-size: 14px;} a:hover.sknop {text-decoration:underline; color:#00bbbb;} </STYLE>
	Всё подписано, проблем быть не должно.
	Внутри тега <BODY> - </BODY> там где у Вас будет текст.
	<DIV id=container style="border: 2px solid #ff0000;"> <!-- блок нервой картинки --> <DIV><IMG height=183 alt=До src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/before.jpg" width=300></DIV> <DIV><IMG height=183 alt=После src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/after.jpg" width=300></DIV></DIV><br> <DIV id=container1 style="border: 2px solid #ff0000;"> <!-- блок второй картинки --> <DIV><IMG height=200 alt=До src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/teeth-before.jpg" width=300></DIV> <DIV><IMG height=200 alt=После src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_kartinki/925/img/teeth-after.jpg" width=300></DIV></DIV>
	Здесь тоже всё должно быть понятно. В каждом теге div id=container задаются 2-е картинки ДО и ПОСЛЕ и, если нужно, их стиль и размеры. Колличество картинок с таким эффектом на страничке на Ваше усмотрение, положение картинок с эффектом на страничке - произвольно. При помещении курсора на картинке появляется разделительная полоса и подсказка на какой стороне находится курсор(До или После). Если кликнуть то разделительная полоса переместится в место клика или взять разделительную полосу за картинку разделителя(зелёную) и передвинуть его в нужное место. При клике по ссылкам "ДО полностью" или "ПОСЛЕ полностью" открывается полностью соответствующая картинка.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.