Кнопки jQuery для изменения фоновых изображений - PullRequest
Новая
       17

Кнопки jQuery для изменения фоновых изображений

1 голос
/ 27 февраля 2012

Я бы хотел создать серию кнопок.Когда пользователь наводит курсор на кнопки, я хотел бы отображать различные изображения в фоновом режиме.Переход между изображениями bg должен быть плавным переходом.

Я вставил немного кода, чтобы показать мои настройки: http://jsfiddle.net/Rk4YG/

Примечание. Было бы неплохо остановитьвозможность выбора фонового изображения - означает ли это использование css background-image?

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

Заранее благодарю за помощь.

1 Ответ

1 голос
/ 02 марта 2012

Вот кое-что, с чего можно начать:

HTML

Мы используем атрибуты данных HTML5 для хранения имени каждого фонового изображения. Они получаются позже с использованием функции jQuery .attr(). 

<div role="main" class="mid"></div>
<div class="btncontain">
    <div class="btn btn1" data-bg-img="image0.png"><a href="#">Button 1</a></div>
    <div class="btn btn2" data-bg-img="image1.png"><a href="#">Button 2</a></div>
    <div class="btn btn3" data-bg-img="image2.png"><a href="#">Button 3</a></div>
    <div class="btn btn4" data-bg-img="image3.png"><a href="#">Button 4</a></div>
    <div class="btn btn5" data-bg-img="image4.png"><a href="#">Button 5</a></div>
    <div class="btn btn6" data-bg-img="image5.png"><a href="#">Button 6</a></div>
    <div class="btn btn7" data-bg-img="image6.png"><a href="#">Button 7</a></div>
    <div class="btn btn8" data-bg-img="image7.png"><a href="#">Button 8</a></div>
    <div class="clearfix"></div>
</div>

CSS

.mid теперь находится за кнопками. И то и другое позиционируется для правильного наложения слоев. 

body { padding: 0; margin:0; }
.mid { width:100%; height: 700px; position:absolute; }
.btncontain { width:80%; margin: 0 auto; position:absolute; }
.btn a { width: 150px; height: 70px; background: yellow; float: left; margin: 0 30px 100px 30px; }
.mid { background-image: url(image0.png);

JavaScript

Функция анимации jQuery исчезает в div.mid поверх фона. Как только она становится непрозрачной на 100%, мы переключаем фоновое изображение на новое и скрываем div.mid. 

$(function(){
    $('.btn a').parents('.btn').hover(function(){
      var  img = $(this).attr('data-bg-img'),
           afterFadeIn = function() {
               $('body').css('background-image', 'url(' + img + ')');
               $('mid').css('opacity', 0);
           };
      $('.mid')
          .css({'background-image': 'url(' + img + ')', 'opacity': 0})
          .animate({ 'opacity' : 1 }, 500, afterFadeIn);
    });
});
...