3 394 Скрипты / Animation

Необычный эффект при наведении

Необычный эффект при наведении

Ещё один необычный эффект при наведении на изображение

HTML

<div id="featured-wrap">
    <div id="featured-content">
        <a href="http://pcvector.ru/"><img alt="Форум твоего направения" src="1_s.jpg" /></a>
        <a href="https://pcvector.net/"><img alt="pcvector.net" src="2_s.jpg" /></a>
        <a href="http://flaaashka.ru/"><img alt="flaaashka" src="3_s.jpg" /></a>
        <a href="http://wordpress.com/"><img alt="Блог" src="4_s.jpg" /></a>
        <a href="http://modx.com/"><img alt="modx" src="5_s.jpg" /></a>
    </div>
    <div id="featured-preview">
        <img alt="Форум твоего направения" src="1_b.jpg" />
        <img alt="pcvector.net" src="2_b.jpg" />
        <img alt="flaaashka" src="3_b.jpg" />
        <img alt="Блог" src="4_b.jpg" />
        <img alt="modx" src="5_b.jpg" />
    </div>
    <div id="featured-overlay">
        <div></div><div></div><div></div><div></div><div></div>
    </div>
</div>

Тут у нас три слоя:

  1. featured-content - содержит миниатюры
  2. featured-preview - содержит изображения для пред просмотра
  3. featured-overlay - невидимый контейнер располагающийся выше предыдущего слоя; будет использоваться в момент наведения мыши

JS

function showPreview(event) {
 $("#featured-preview").show();
};
 
function hidePreview(event) {
 $("#featured-preview").hide();
};
 
function updatePreview(index) {
 $("#featured-preview img").hide().eq( index ).show();
};
 
function movePreview(event) {
 var content_position = $("#featured-content").offset();
 
 $("#featured-preview").css("left", event.pageX - content_position.left - 160);
};

Имеем несколько функций showPreview/hidePreview - срабатывают, когда мышь перемещается от входа в контейнер до выходы из него, и movePreview срабатывает при наведении мыши. Предварительный просмотр обновляется через updatePreview.

Скачать 539Загрузок 116,2 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи