DownLoad_Free

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

Reload Google_Translater (F5)

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

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

[ ]	Дата обновления: 1.7.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
Просмотров: 1615 \| Загрузок: 0

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

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

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

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

Система Orphus

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

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

Дизайнерские и инженерные решения, которые нас покорили

Конкурс знатоков биатлона 2013/14 на sports.ru. Наши команды.

Сентябрьский ТОП оригинальных русских шрифтов

Javascript эффект - написание текста чернильным пером

Как бесплатно проверить безопасность компьютера в интернете

Чат для сайта бесплатно

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

Скрипт игры в BlackJack

Скачать Аватары на тему фильма Аватар

Калькулятор для сайта бесплатно

Дизайнерские и инженерные решения, которые нас покорили

Конкурс знатоков биатлона 2013/14 на sports.ru. Наши команды.

Сентябрьский ТОП оригинальных русских шрифтов

Javascript эффект - написание текста чернильным пером

Как бесплатно проверить безопасность компьютера в интернете

Чат для сайта бесплатно

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

Скрипт игры в BlackJack

Скачать Аватары на тему фильма Аватар

Калькулятор для сайта бесплатно

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

^ Наверх ^

Полезно!

Код кнопки