DownLoad_Free

Скрипт-шаблон Ротатор html блоков

Reload Google_Translater (F5)

Главная » Материалы » Web, scripts
<--Немного места для рекламы-->

Скрипт-шаблон Ротатор html блоков

[ ]	Дата обновления: 9.9.2017
Block 1 Очень интересный вид вывода интернет страницы Коды <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>title</title> <meta name="description" content="descr" /> <style> #rotator { width: 800px; height: 360px; position: relative; background: white; padding: 0 20px 40px 20px; } #block-1 { background: #d5fcff; } #block-2 { background: #e1ffd5; } #block-3 { background: #ffffd8; } #rotator > div { position: absolute; overflow: hidden; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #rotator > div > div { padding: 20px; } #rotator > div > div img { float: right; margin: 0 0 2px 10px; } #rotator .active { top: 20px; left: 20px; width: 460px; height: 360px; } #rotator .non-active-top { top: 20px; left: 500px; height: 170px; width: 320px; } #rotator .non-active-bottom { top: 210px; left: 500px; height: 170px; width: 320px; } #rotator .non-active-top:hover, #rotator .non-active-bottom:hover { cursor: pointer; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); box-shadow: 0 0 10px rgba(0,0,0,0.4); } #rotator h2 { text-align: center; line-height: 130px; } #rotator .active h2 { display: none; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script> <script> // DOM Ready $(function() { var current; function rotate() { if (current == 1) { $("#block-1").removeClass().addClass("active"); $("#block-2").removeClass().addClass("non-active-top"); $("#block-3").removeClass().addClass("non-active-bottom"); } else if (current == 2) { $("#block-1").removeClass().addClass("non-active-bottom"); $("#block-2").removeClass().addClass("active"); $("#block-3").removeClass().addClass("non-active-top"); } else { $("#block-1").removeClass().addClass("non-active-top"); $("#block-2").removeClass().addClass("non-active-bottom"); $("#block-3").removeClass().addClass("active"); } } $("#rotator div").click(function() { current = this.id.substr(6); rotate(); }); }); </script> </head> <body> <center> <div id="#page-wrap"> <h1>Title</h1> <div id="rotator"> <div id="block-1" class="active"> <h2>Block 1</h2> <div>text1</div> </div> <div id="block-2" class="non-active-top"> <h2>Block 2</h2> <div>text 2</div> </div> <div id="block-3" class="non-active-bottom"> <h2>Block 3</h2> <div>text 3</div> </div> </div> <!--rotator--> </div> <!--page_wrap--> </center> </body> </html> Block 3 text 3 Пример внедрения на сайте

Теги материала: ротатор, rotator, jQuery, html Похожие материалы: Бесплатные идеи и шаблоны для сайтов (css,xhtm,flash) OCRedactor - бесплатный конвертер офисных программ в HTML или BB коды Скрипт JQuery слайд-шоу на Ucoz jQuery фото галерея - Zoomimage PHP+jQuery модуль для быстрого создания фотогалерей Создание сайта для iPhone на базе технологии jQuery Mobile Бесплатный визуальный редактор сайта онлайн Скрипт футбольной таблицы на 6 команд Генератор семантической разметки страницы сайта формата Schema.org онлайн бесплатно Ротатор картинок - Carusel Flex Категория: Все \| Добавил: anikey99
Просмотров: 1634 \| Загрузок: 0

Полезные дополнения: <--могут быть здесь-->

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Нашли ошибку или
Быстрая форма обратной связи -
жмите Ctr+Enter

Система Orphus

Рекомендуем:
<--что-нибуть здесь-->

Случайные материалы

Бесплатный бездепозитный бонус 50$ для игры в покер от сайта pokerroomschool.com

Сервис Yandex. Бесплатное хранение и обмен mp3, аудио, видео, архивными и другими файлами до 5000 Мб

Обучение английскому языку онлайн бесплатно

MADALEINE feeling f/s 2009

Как быстро и бесплатно создать карту сайта.

100000 фото обо всем

Генератор сказок Alaborn Chaos

Скрипт всплывающего модального окна

Определение геокоординат пользователя по его IP

Усиль бдительность. Возможно Вас используют. DrWeb.Online.

Бесплатный бездепозитный бонус 50$ для игры в покер от сайта pokerroomschool.com

Сервис Yandex. Бесплатное хранение и обмен mp3, аудио, видео, архивными и другими файлами до 5000 Мб

Обучение английскому языку онлайн бесплатно

MADALEINE feeling f/s 2009

Как быстро и бесплатно создать карту сайта.

100000 фото обо всем

Генератор сказок Alaborn Chaos

Скрипт всплывающего модального окна

Определение геокоординат пользователя по его IP

Усиль бдительность. Возможно Вас используют. DrWeb.Online.

Copyright kachay.ucoz.org © 2008-2017 | Хостинг от uCoz | wright2webmaster |

^ Наверх ^

Полезно!

Код кнопки