Красивый эффект смены картинок JQuery

untitled-2В данном уроке рассмотрим реализацию плавной смены картинок при наведении курсора мыши. Очень эффектно. Можно использовать в шапках и логотипах сайтов, а также в навигации сайтов. Реализуем мы это с помощь нами любимого jquery без использования стороних плагонов. И так начнём. Первым делом нам необходимо поместить этот код между тегами.

<script src="jquery-1.3.2.js" type="text/javascript"></script><script type="text/javascript"><!--
$(function () {
  $('#pic a')
    .append('<span class="hover" id="piccolor" />').each(function () {
      var $span = $('> span.hover', this).css('opacity', 0);
      $(this).hover(function () {
        $span.stop().fadeTo(1000, 1);
      }, function () {
        $span.stop().fadeTo(1000, 0);
      });
    });
});
// --></script>

Тут все стандартно — подключаем фреймворк и функцию. Далее придаем немного стиля c помощью css:

<!--
body
{
background:#000;
}

#pic
{
width:500px;
height:300px;
margin:auto;
position:relative;
display:block;
}

#pic a
{
background-image:url(1.png);
background-repeat: no-repeat;
position:relative;
display:block;
width:500px;
height:300px;
}
#pic span.hover
{
width:500px;
height:300px;
background-image:url(2.png);
background-repeat: no-repeat;
position:relative;
display:block;
}
-->

И в конце вставляем таким образом само изображение:

<div id="pic"><a href="http://"></a></div>

Теперь смотрим, что у нас получилось — Посмотреть пример в работе. Все исходники можно скачать — Скачать исходники.

Получился очень красивый эффект. Продолжение следует...

  • Sashkka

    Побольше б таких штук

  • Sylfer

    Блин как здорово! Исходники украду у вас)) Что такое собственно jquery? как понимаать строчку ...src="jquery-1.3.2.js" type="text/javascript"...? Если просто написать script type «text/javascript», то это чудо работать не будет?)

  • Rudavina

    интересная тема

  • Raven

    классная штука!автору респект. именно то, что искал.

    А как сделать несколько таких кнопок на странице?

  • stinkyrat

    скажите пожалуйста как сделать на одной странице несколько таких картинок? )

  • просто создайте еще один див pic2, пропишите вверху страницы скрипт такойже как и для pic, но для слоя pic2 (просто pic замените на pic2). И не забудьте в стилях указать pic2 и его свойства.

  • stinkyrat

    спасибо большое!!!

    я делала именно так только, 2ку ставила перед pic, поставила после все работает!

    благодарю!

    )

  • Большое спасибо!

    У меня на странице 9 таких картинок, все работает, только хотелось бы как-то укоротить запись в , сделать циклом (pic1, pic2 и т.д.), подскажете как? А то я дублировала запись $('#pic1 a')

    .append ('').each (function () {

    var $span = $('> span.hover', this).css ('opacity', 0);

    $(this).hover (function () {

    $span.stop ().fadeTo (700, 1);

    }, function () {

    $span.stop ().fadeTo (700, 0);

    });

    });

    9 штук... очень длинно...

Запись навигация

Top