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

Красивые переключающиеся окна с информацией

Вернуться к исходному примеру
Сайты моего проекта Начать простотр Хотите ознакомиться с сайтами мого проекта	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/prototype_bloki/976/prototype.js"></script> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/prototype_bloki/976/rico.js"></script> <style> /* стиль окна и его содержимого / div.sizeMe { width : 120px; padding-top : 5px; padding-bottom : 5px; background-color : #c6c3de; font-family : Arial; font-size : 11px; text-align : center; border:ridge 6px #ffff00; } / стиль шапки */ #statusMsg {color:#00ffff; FONT-WEIGHT: bold;} </style> <script> var startWidth; var ef = -1; // массив информации для окон var soderganie=new Array() soderganie[0]='<IMG height=120 alt="JavaScript на SkriptKPBstudio" src="http://skriptkpbstudio.ucoz.ru/flash/zastawka_script_luch1.gif" style="float: left;" width=280 border=0>На сайте <a href="http://skriptkpbstudio.ucoz.ru/" target=_blank>Skriptkpbstudio.ucoz.ru</a> Вы найдёте большую, постоянно пополняемую, бесплатную коллекцию JavaScript, jQuery и HTML&CSS эффектов. Ко всем скриптам свободный доступ для скачивания. Все скрипты подробно разобраны и имеют инструкцию по установке и применению. Каждый можно посмотреть в работе. Для удобства поиска имеется тематический каталог, система поиска и карта сайта.<div align=right style="padding-right: 10px"><a style="color:#5b5b5b" href="javascript:endEffect()">В исходное</a></div>'; soderganie[1]='<div style="BORDER: #ffff00 1px solid; width: 458px; margin: 3px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="458" height="60"><param name="src" value="http://skriptkpbstudio.ucoz.ru/flash/banner44.swf" /><PARAM NAME="bgcolor" VALUE="#0000ff"><embed name="gallery" type="application/x-shockwave-flash" src="http://skriptkpbstudio.ucoz.ru/flash/banner44.swf" width="458" height="60"></embed></object></div>На сайте <a href="http://webkpb.ucoz.ru/" target=_blank>WebKPB.ucoz.ru</a> Вы найдёте большую, постоянно пополняемую коллекцию Flash. К каждой Flash имеется fla исходник. Для удобства поиска все Flash разбиты по темам, имеется система поиска и возможность применения фильтров для поиска Flash нужного назначения. Кроме этого здесь Вы найдёте и другие WEB эффекты - календарики, композиции, фоны, заготовки для банеров и т.д.<div align=right style="padding-right: 10px"><a style="color:#5b5b5b" href="javascript:endEffect()">В исходное</a></div>'; soderganie[2]='<div style="BORDER: #ffff00 1px solid; width: 468px; margin: 3px;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="468" height="60"><param name="src" value="http://skriptkpbstudio.ucoz.ru/flash/Frame 76.swf" /><PARAM NAME="bgcolor" VALUE="#ff0000"><embed name="gallery" type="application/x-shockwave-flash" src="http://skriptkpbstudio.ucoz.ru/flash/Frame76.swf" width="468" height="60"></embed></object></div>На сайте <a href="http://kpbwebstudio.narod.ru/" target=_blank>KPBwebStudio</a> находится моя WEBстудия, здесь Вы можете познакомиться с некоторыми моими работами, ознакомиться со списком оказываемых мною услуг и ценами на них. Здесь Вы можете сделать заказ на изготовление нужного Вам элемента сайта или сайта целиком.<div align=right style="padding-right: 10px"><a style="color:#5b5b5b" href="javascript:endEffect()">В исходное</a></div>'; // массив ссылок управления var ssylka=new Array() ssylka[0]="Ознакомиться со 2-м сайтом проекта"; ssylka[1]="Ознакомиться с 3-м сайтом проекта" ssylka[2]="Повторить просмотр" // массив названий окон var shapka=new Array() shapka[0]="JavaScript, jQuery и CSS&HTML эффекты"; shapka[1]="Flash и другие WEB эффекты и заготовки" shapka[2]="Моя WEBстудия" function startEffect() { if (ef==2) { ef=0 } else { ef=ef+1 } if (ef==0) { startWidth = $('sizeMe').offsetWidth; // ширина, высота, скорость, количество шагов (1-го окна) new Rico.Effect.Size( $('sizeMe'), 450, 180, 500, 10, {complete:function() {setStatus('Если Вам нужны скрипты Вам сюда, здесь их более 1000',5000);}} ); // временное сообщение и время его отображения } if (ef==1) { startWidth = $('sizeMe').offsetWidth; // ширина, высота, скорость, количество шагов (2-го окна) new Rico.Effect.Size( $('sizeMe'), 500, 100, 800, 20, {complete:function() {setStatus('Хотите иметь красивый сайт, обязательно побывайте тут',5000);}} ); // временное сообщение и время его отображения } if (ef==2) { startWidth = $('sizeMe').offsetWidth; // ширина, высота(если null то без изменений), скорость, количество шагов (3-го окна) new Rico.Effect.Size( $('sizeMe'), 500, null, 1000, 50, {complete:function() {setStatus('Вам нужен скрипт, Flash, сайт или что-то другое -- Вам сюда',5000);}} ); // временное сообщение и время его отображения } } function setStatus(s,n) { $('statusContainer').style.visibility = "visible"; $('statusMsg').style.color = "#ffff00"; // временное сообщение в шапке и его цвет $('statusMsg').innerHTML = s; $('Content').innerHTML = soderganie[ef]; $('toggle').innerHTML = ssylka[ef]; setTimeout( "$('statusMsg').style.color = '#00ffff';$('statusMsg').innerHTML = shapka[ef];", n ); // возврат основного сообщения в шапке и его цвета } // возвратное окно function endEffect() { ef=-1 startWidth = $('sizeMe').offsetWidth; // ширина, высота, скорость, количество шагов (возвратного окна) new Rico.Effect.Size( $('sizeMe'), 120, 60, 500, 10 ); $('toggle').innerHTML = 'Посмотреть еще раз'; $('Content').innerHTML = 'Мне приятно что мой проект заинтересовал Вас'; $('statusMsg').innerHTML = 'Сайты моего проекта'; } </script>
	Всё подписано(если что-то не понятно посмотрите исходный скрипт).
	Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.
<div align="center"> <!-- начальное окно и информация в нём --> <div id="statusContainer" class="statusContainer"> <!-- контейнер шапки(названия) окна --> <span class="statusMsg" id="statusMsg">Сайты моего проекта</span> </div> <!-- контейнер содержимого --> <div id="sizeMe" class="sizeMe roundNormal"> <!-- контейнер ссылки управления --> <div><a id="toggle" style="color:#2b2b2b" href="javascript:startEffect()">Начать простотр</a></div> <!-- контейнер информации --> <div id="Content" style="height:50px;">Хотите ознакомиться с сайтами мого проекта</div> </div></div>
Всё подписано. И думаю что всё должно быть понятно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.