- Веб-Шаблоны
- Шаблон интернет-магазина
- Шаблоны для CMS
- Facebook шаблоны
- Конструктор сайтов
«SlideBox» jQuery слайдер
Март 17, 2011
Простой скрипт, благодаря которому достигается эффект скользящего окна, в котором находится контент.
JavaScript
Нужно добавить jQuery фрэймворк с помощью атрибута src в теге скрипта этих .js файлов.<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>Скрипт инициализации мы помещаем в раздел .
<script type="text/javascript"> $(function() { $("#link").click(function(event) { event.preventDefault(); $(this).toggleClass("link2"); $("#dropdown_box").slideToggle(); }); }); </script>.header-banner-right Этот класс устанавливает высоту окна в скрытой позиции #link Это элемент кнопки с изображением, которое скрывает контент #dropdown_box Этот индентификатор является окном области контента
HTML
Ниже этот скрипт представлен в HTML:CSS
#link { background:url(images/button_go_box.png) no-repeat 0 0; display:block; height:39px; width:39px; z-index:180000; margin:0 0 0 471px; position:absolute; } .dropdown_box { z-index:1; } .dropdown_box { zoom:0; z-index:1; } .all .dropdown_box { zoom:0; z-index:1; }