Почему я бросил вести этот сайт! Потому, что система ведет себя по-хамски по отношению к посетителям сайта, навязывая последним бесконечное количество баннеров-заглушек контента, особенно пришедшим с мобильных устройств!

DownLoad_Free

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

Reload Google_Translater (F5)

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

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

[ ]	Дата обновления: 5.10.2024
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 Похожие материалы: OCRedactor - бесплатный конвертер офисных программ в HTML или BB коды jQuery фото галерея - Zoomimage PHP+jQuery модуль для быстрого создания фотогалерей Бесплатный визуальный редактор сайта онлайн Скрипт футбольной таблицы на 6 команд Генератор семантической разметки страницы сайта формата Schema.org онлайн бесплатно Быстрая поисковая форма для Юкоз Фотогалерея с "разлетающимися" картинками. jQuery script Сборщик новостей с rss-фидов и социальных сетей Zen Codding(Emmet) редактор ввода HTML онлайн Категория: Все \| Добавил: anikey99
Просмотров: 2840 \| Загрузок: 0

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

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

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

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

Система Orphus

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

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

Гитарный тюнер онлайн - Настройка гитары

Таблица чемпионата России (ЧР-2010) по футболу. Результаты игр, статистика, комментарии, прогнозы, фото

Скрипт голосования за самую красивую женщину мира на Ваш сайт

Идеи дизайнов для фитнес сайта

Психологические тесты на ПК (компьютер) скачать бесплатно

Гадание на картах ТАРО. Системы гадания: Кельский крест. Описание

Как добавить на сайт блок с комментариями

Скрипт таймера обратного отсчета времени для сайта

Критерии выбора хостинга для сайта (бесплатное тестирование от loadimpact.com)

Сладер с вертикальной текстовой навигацией

Гитарный тюнер онлайн - Настройка гитары

Таблица чемпионата России (ЧР-2010) по футболу. Результаты игр, статистика, комментарии, прогнозы, фото

Скрипт голосования за самую красивую женщину мира на Ваш сайт

Идеи дизайнов для фитнес сайта

Психологические тесты на ПК (компьютер) скачать бесплатно

Гадание на картах ТАРО. Системы гадания: Кельский крест. Описание

Как добавить на сайт блок с комментариями

Скрипт таймера обратного отсчета времени для сайта

Критерии выбора хостинга для сайта (бесплатное тестирование от loadimpact.com)

Сладер с вертикальной текстовой навигацией

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

^ Наверх ^

Полезно!

Код кнопки