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

DownLoad_Free

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

Reload Google_Translater (F5)

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

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

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

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

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

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

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

Система Orphus

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

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

Автоматическая разбивка текста на страницы средствами jQuery

Book Designer v 4.0

Учебник по Юкоз - Все способы поиска по сайту Юкоз

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

Бесплатный php скрипт интернет магазина

Быстрая поисковая форма для Юкоз

Онлайн тренажер

PHP Бесплатный скрипт(движок) для сайта знакомств

Слайдер Карусель 3D 2015 бесплатно от anikey99

PokerStars установил на очередной рекорд Гинеса

Автоматическая разбивка текста на страницы средствами jQuery

Book Designer v 4.0

Учебник по Юкоз - Все способы поиска по сайту Юкоз

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

Бесплатный php скрипт интернет магазина

Быстрая поисковая форма для Юкоз

Онлайн тренажер

PHP Бесплатный скрипт(движок) для сайта знакомств

Слайдер Карусель 3D 2015 бесплатно от anikey99

PokerStars установил на очередной рекорд Гинеса

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

^ Наверх ^

Полезно!

Код кнопки