В данном уроке рассмотрим реализацию плавной смены картинок при наведении курсора мыши. Очень эффектно. Можно использовать в шапках и логотипах сайтов, а также в навигации сайтов. Реализуем мы это с помощь нами любимого 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://world-pro.ru"></a></div>
Теперь смотрим, что у нас получилось — Посмотреть пример в работе. Все исходники можно скачать — Скачать исходники.
Получился очень красивый эффект. Продолжение следует…