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

Красивый переключатель блоков информации

Библиотеки JavaScript, jQuery, mootools и HTML&CSS эффектов На сайте SkriptKPBstudio.ucoz.ru Вы найдёте большие библиотеки JavaScript, jQuery, mootools и HTML&CSS эффектову. Библиотеки постоянно пополняюся. К каждому скрипту или эффекту есть пример. Для удобства работы и поиска, все библиотеки разбиты на тематические разделы и подразделы. Все представленные скрипты предоставляются абсолютно бесплатною. Моя WEBстудия На данный момент сайт адаптирован под IE (ведутся работы по кроссбраузерности). Здесь Вы можете посмотреть некоторые мои работы, ознакомиться с перечнем оказываемых мною услуг и ценами на них. И, если Вас всё устраивает, сделать заказ на нужный Вам сайт или его элементы. Библиотека Flash На сайте WebKPB.ucoz.ru Вы найдёте большую библиотеку всевозможных Flash. К каждой Flash имеется исходник, который можно скачать или получить. Для удобства, все Flash разбиты по своему функциональному назначению. Также, здесь Вы можете сделать заказ на нужную Вам Flash.	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css> /* общие параметры и стиль переключателя / #slider {width:508px; font-family:Arial, Helvetica, sans-serif; font-size:14px; color: #00ff00;} / зона меню / .header {width:488px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; margin-top:5px; cursor:pointer; background:url(http://skriptkpbstudio.ucoz.ru/demo_srt/raznye/938/images/header.jpg)} .header:hover {background:url(http://skriptkpbstudio.ucoz.ru/demo_srt/raznye/938/images/header_over.jpg)} / зона информации */ .content {overflow:hidden} .text {width:474px; border:2px solid #9ac1c9; border-top:none; padding:15px; color: #00ffff;} </STYLE> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/raznye/938/slider.js"></script>
	Всё подписано, все параметры и стили переключателя задаются в CSS. Блок переключения информации позволяет экономить место на страничке, улучшает восприятие информации и придаёт стильность падаче информации.
	В сам тег <BODY> вставляем атрибут
	onload="slider('slider',1)"
	Здесь задаём какой блок будет открыт при загрузке странички(у меня, как видите, задан 1). Если задать 0 то все изначально будут закрыты.
	Внутри тега <BODY> - </BODY> там где у Вас будет переключатель.
<div id="slider"> <div class="header" id="one-header">Header One</div> <div class="content" id="one-content"> <div class="text"><img src="images/zastawka_script_luch1.gif"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit. </div> </div> <div class="header" id="two-header">Header Two</div> <div class="content" id="two-content"> <div class="text"><object class=ramka 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="images/studio_kruglaj_ok_mal24.swf" /> <PARAM NAME="bgcolor" VALUE="#444444"> <embed name="gallery" type="application/x-shockwave-flash" src="images/studio_kruglaj_ok_mal24.swf" width="468" height="60"></embed></object> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit. Vivamus sit amet velit eu sapien dignissim mattis. </div> </div> <div class="header" id="three-header">Header Three</div> <div class="content" id="three-content"> <div class="text"><object class=ramka 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="images/studio_kruglaj_ok_mal24.swf" /> <PARAM NAME="bgcolor" VALUE="#444444"> <embed name="gallery" type="application/x-shockwave-flash" src="images/studio_kruglaj_ok_mal24.swf" width="468" height="60"></embed></object> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit. Vivamus sit amet velit eu sapien dignissim mattis. </div> </div> </div>
Здесь всё должно быть понятно. Задаём названия блоков и информацию в них. В блоках можно размещать любую информацию. Колличество блоков на ваше усмотрение. Чтобы закрыть все блоки кликните еще раз по обкрытому блоку.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.