Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Эффект для картинок с помощью jQuery
Эффект для картинок с помощью jQuery
JackДата: Пятница, 09.07.2010, 18:31 | Сообщение # 1
Шептун
Группа: Пользователи
Пользователь №: 9
Сообщений: 32
Награды: 0
Репутация: 2
Статус: оффлайн

Подобные решения мы уже представляли на нашем сайте. Но это уникально тем, что совмещает в себе 2 эффекта сразу. При наведении мышки на изображение, оно приближается и снизу выезжает его описание.

Давайте посмотрим как это реализовать!

HTML

Code
<!-- начало thumbnailWrapper div -->

<div class='thumbnailWrapper'>
<ul>
<li>

<a href='#'><img src='images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div>
</li>

<li>
<a href='#'><img src='images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div>
</li>
        
<li>
<a href='#'><img src='images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy</p>
</div>
</li>

<div class='clear'></div>
</ul><!-- конец неупорядоченного списка -->

</div><!-- конец spolightWrapper div -->

В HTML коде ничего особенного. В демо версии у нас будет 9 элементов списка. в то время как здесь представлено 3. Это сделано в целях экономии места. Там все так же по аналогии.

CSS

Code
.thumbnailWrapper ul {
      list-style-type: none; /* убрать стиль типа списка по умолчанию   
items (the circles) */
      margin:0px; /* убрать margin по умолчанию */
      padding:0px; /* убрать padding по умолчанию */
}
.thumbnailWrapper ul li {
      float:left; /* важно: left float */
      position:relative; /* чтобы мы могли использовать top и left позиционирование */
      overflow:hidden; /* спрятать контент за границами   
(ZOOM) */
}
.thumbnailWrapper ul li a img {
      width:200px; /* не важно, картинки, которые мы используем слишком велики   
*/
      position:relative; /* чтобы мы могли использовать top и left позиционирование */
      border:none; /* убрать синюю границу по умолчанию */
}
.caption{
      position:absolute; /* необходимо для позиционирования */
      bottom:0px;   
      left:0px;   
      width:100%;   
      display:none;   
       
      background:#0c4b62;
      color:white;
      opacity:0.9;
}
.caption .captionInside{
      
      padding:10px;
      margin:0px;
}
.clear { clear:both; }

jQuery

Code
$(window).load(function(){

//задаем некоторые переменные
var thumbnail = {
imgIncrease : 100, /* увеличение изображения в пикселях для зума */
effectDuration : 400, /* продолжительность эффекта для зума и надписи */

/*
Взять ширину и высоту изображений. Используется для 2-х вещей
1) сделать все элементы списка одного размера 2) вернуть изображения
к первоначальным размерам после зума
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()

};

//Элементы списка того же размера, что и изображения
$('.thumbnailWrapper ul li').css({   

'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight   

});

//при наведении мышки на элемент...
$('.thumbnailWrapper ul li').hover(function(){

$(this).find('img').stop().animate({

/* увеличить ширину изображения для зума*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* нам необходимо изменить левое и верхнее позиционирование
для зума, и поэтому мы придаем им отрицательные значения
   */
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)

},{   

"duration": thumbnail.effectDuration,
"queue": false

});

//показать надпись м помощью события slideDown
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

//когда мышку уводят...
}, function(){

//найти изображение и анимировать его...
$(this).find('img').animate({

/* вернуть первоначальный размер */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0

}, thumbnail.effectDuration);

//спрятать надпись с помощью события slideUp
$(this).find('.caption').slideUp(thumbnail.effectDuration);

});
});

Вот и все готово. В коде находятся комментарии по функциям и событиям.

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



Прикрепления: 9788796.png(31.0 Kb)

 
вверх
cechДата: Пятница, 09.07.2010, 19:17 | Сообщение # 2
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Демо по-моему не то!


 
вверх
JackДата: Пятница, 09.07.2010, 20:06 | Сообщение # 3
Шептун
Группа: Пользователи
Пользователь №: 9
Сообщений: 32
Награды: 0
Репутация: 2
Статус: оффлайн
Quote (cech)
Демо по-моему не то!

Извиняюсь, исправил
 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:46 | Сообщение # 4
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
Jack, красиво выглядит.Может мне и пригодится..


 
вверх
nDiviDДата: Суббота, 10.07.2010, 08:15 | Сообщение # 5
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Да, особенно для фотогалерей


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
SkaN7769Дата: Воскресенье, 24.10.2010, 15:50 | Сообщение # 6
Завзятый балабол!
Группа: Пользователи
Пользователь №: 170
Сообщений: 109
Награды: 0
Репутация: 5
Статус: оффлайн
а можна такую штуку сделать для всех картинок в новостях либо в каталоге файлов?




Сообщение отредактировал SkaN7769 - Воскресенье, 24.10.2010, 15:51
 
вверх
footballmasterДата: Вторник, 26.10.2010, 18:02 | Сообщение # 7
Спикер
Группа: Пользователи
Пользователь №: 191
Сообщений: 207
Награды: 9
Репутация: 43
Статус: оффлайн
SkaN7769, я думаю можно



Кто хочет заказать у меня дизайн сайта стучите в Skype: alexandru_lampard ; ICQ: 614017088
 
вверх
cechДата: Вторник, 26.10.2010, 18:50 | Сообщение # 8
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
SkaN7769, Запросто, почему нет?


 
вверх
Klepa4kaДата: Среда, 16.02.2011, 21:26 | Сообщение # 9
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 734
Сообщений: 2
Награды: 0
Репутация: 0
Статус: оффлайн
Он вообще для Ucoz? Что-то я не очень пойму как тут Jquery работает. Куда его вставлять.
 
вверх
Alex[aka]HorrorДата: Пятница, 11.03.2011, 09:04 | Сообщение # 10
Молчун
Группа: Пользователи
Пользователь №: 811
Сообщений: 13
Награды: 0
Репутация: 0
Статус: оффлайн
куда хочешь smile
 
вверх
cechДата: Пятница, 11.03.2011, 19:34 | Сообщение # 11
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Klepa4ka, лично для uCoz ничего не пишется, существует библиотеки типа jQuery или Mootools вон на них и пишутся разные js, uCoz использует jQuery соответственно, что написано под эту библиотеку, то и будет работать!


 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Эффект для картинок с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск: