滑動背景圖片效果

Question

嗨，我想在背景圖片之間重現某種滑塊效果，就像網站http://www.moveline.com/在首頁上所做的那樣。

示例部分的標題為：“為您的下一步提供詳細信息”。

我看看他們使用jQuery，RequireJS（2.1.4）的代碼

我試圖隔離產生這種效果的代碼，但是JavaScript代碼已經壓縮，這使得它真的很難理解（加上他們使用主干）。

知道我如何借助一些插件在jQuery中很好地重現這一點嗎？

謝謝

Answer 1

這是他們在網站http://jsfiddle.net/y29kR/2/上所做的幾乎所有工作的提琴

HTML：

<div class="items">
    <div class="menu-item" data-look-at="0 0">item1</div>
    <div class="menu-item" data-look-at="-40px -70px">item2</div>
    <div class="menu-item" data-look-at="-120px -30px">item3</div>
</div>
<div class="menu-content"></div>

CSS在背景位置上具有CSS過渡

.items {
    float:left;
}
.menu-item {
    padding: 15px;
    color: #333;
    border-bottom: 1px solid #ccc;
    width: 70px;
}

.menu-content {
    height: 150px;
    width: 150px;
    background-repeat: no-repeat;
    background-image: url("http://placehold.it/350x350");
    background-position: center center;
    float:left;
    -webkit-transition: background-position 600ms ease;
    -moz-transition: background-position 600ms ease;
    -o-transition: background-position 600ms ease;
}

我正在使用jQuery的.css方法來檢測懸停事件以產生（幾乎）所需的效果：

jQuery(document).ready(function() {
    $('.menu-item').hover(function(e) {
        var target = $(e.target),
            newPos = target.data("look-at");
        $('.menu-content').css({'background-position': newPos}); 
    });
    $('.items').mouseleave(function(e) {  
        $('.menu-content').css({'background-position': 'center center'}); 
    });
});