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

Вертикальное переключение блоков информации

Example 1 Example 2 Example 3 Example 4 Example 5 Example content 1 Например так. И далее необходимый текст (если он есть). Example content 2 Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Example content 3 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Example content 4 Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla. Example content 5 Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<style type="text/css"> /* меню / #example-links {border: 1px solid #ccc; border-bottom: none; float: left; width: 200px; background-color: #555; } / ссылки меню / #example-links a {border-bottom: 1px solid #ccc; display: block; font-size: 17px; height: 39px; line-height: 39px; padding-left: 10px; color: #000; font-weight:bold;} #example-links a:focus {outline: 0;} #example-links a:hover {background-color: #333; color: #00ffff;} #example-links a:active {background-color: #333; color: #00ffff;} / информационное окно / #example-content-container {border: 1px solid #000; / border-left: none; */ height: 200px; overflow: hidden; width: 350px; background-color: #aaa; color: #000;} #example-content div {height: 200px; padding: 10px;} </style> <script type="text/javascript" src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_bloki/920/jquery.js"></script>
	Всё подписано. Всё параметры и стили задаются в CSS. В jQuery скрипте менять нечего.
	Внутри тега <BODY> - </BODY> там где у Вас будет блок.
<div id="example-links"><a href="#">Example 1</a> <a href="#">Example 2</a> <a href="#">Example 3</a> <a href="#">Example 4</a> <a href="#">Example 5</a></div> <div id="example-content-container"> <div style="margin-top: 0px;" id="example-content"> <div><b>Example content 1</b><br> <img src="esempio_fr_files/logo_htmlit.gif">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div> <div><b>Example content 2</b><br> Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div> <div><b>Example content 3</b><br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div> <div><b>Example content 4</b><br> Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div> <div><b>Example content 5</b><br> Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div> </div> </div> <div style="clear: both;"> </div> <div><script language="javascript"> $('#example-links a').click(function(){ var index = $("#example-links a").index(this); $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border ( величина крокрутки ) return false; }); </script></div>
Здесь тоже всё должно быть понятно. Задаем ссылки управления и сами информационные блоки. Колличество блоков на Ваше усмотрение. В блоках можно размещать все что угодно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.