Меня заинтересовал эффект ротации новостей на сайте Яндекс. Есть группа постоянных (статичных) новостей, а последняя новость вращается через заданное количество секунд. Вот этот эффект я решил повторить в своём примере.
Оригинал на сайте Яндекс:
Вот что получилось у меня (стилями я пренебрёг, т.к. не стояла точная задача копирования стилей с Яндекса):
<link rel="stylesheet" href="/pubs/js/flipclock/compiled/flipclock.css">
<script src="/pubs/js/flipclock/src/flipclock/js/libs/jquery.min.js"></script>
<script src="/pubs/js/flipclock/compiled/flipclock.min.js"></script>
<div class="clock-1" style="margin-top:2em;"></div>
<div class="clock-2" style="margin-top:2em;"></div>
<div class="message"></div>
<script type="text/javascript">
var clock1, clock2;
$(document).ready(function() {
clock1 = $('.clock-1').FlipClock({
clockFace: 'MinuteCounter',
language:'ru-ru'
});
clock2 = $('.clock-2').FlipClock({
clockFace: 'MinuteCounter',
language:'ru-ru'
});
/*clock2 = $('.clock-2').FlipClock({
clockFace: 'HourlyCounter'
});*/<?$time = 40*rand(1, 60);?>
clock1.setTime(<?=$time;?>);
clock1.setCountdown(true);
clock1.loadLanguage("ru");
clock1.start();
clock2.setTime(<?=$time;?>);
clock2.setCountdown(true);
clock2.loadLanguage("ru");
clock2.start();
});
</script>Пример создания кроссбраузерного модального окна, открывающегося один раз, при заходе на сайт. Используемые технологии: jQuery + Cookie + CSS. Пример работает во всех современных браузерах (кроссбраузерность).
Окно открывается только при первом посещении сайта. При этом, можно выбрать как просмотр, так и отказ от посещения сайта.
Данный трюк может быть использован для предложения подписки на те или иные ресурсы сайта (или социальных сетей), предложения тех-или иных специальных предложений, и т.д. Также данный прием может быть использован, при создании сайтов взрослой тематики (алкогольная продукция, контент для взрослых, и т.д.).
Предыстория: Я столкнулся с тем, что в интернете нет внятной Интерактивной карты России. Что я подразумеваю под интерактивностью? Карту России, при наведении на регион мы видим подпись с названием региона, очертаниями границ региона а также возможностью кликнуть и перейти на описание региона на новой странице.
Все решения найденные в интернете основывались на Flash технологиях или технологиях замещения картинок Javascript методами. Минусы данных способов — очевидны. Flash технология не всегда позволяет оперативно обновить информацию на карте России (а если и позволяет, то достаточно сложна в реализации). Технология замещения картинок плоха тем, что при наведении курсора на регион, приходится подгружать изображение очертаний этого региона (эти изображения также придется отрисовать, что займет очень много времени).
Моё решение просто — использование одного изображения карты России, + Javascript реализующий обведение границ региона по AREA координатам изображения карты России. Главная сложность этого метода — это отрисовка координат границ регионов. На минуточку, количество регионов в России больше 80 :)
© 2007–2024, konyakov.ru
☩