在背景上滑動效果圖片

嗨我想重現背景圖片之間的排序滑塊效果，如網站http://www.moveline.com/在主頁上。在背景上滑動效果圖片

示例部分在標題下方：「爲您的下一步移動繪製細節」。

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

我試圖隔離正在生產的效果，但JavaScript代碼已經被壓縮，這使得它真的很難理解代碼（加他們使用骨幹）。

任何想法如何我可以重現這很好可能在jQuery的一些插件的幫助？

謝謝

來源

2013-07-12 Jerome Ansia

轉到www.jqueryui.com並尋找插件。有人可能已經這樣做了，你可以使用他們做的事情作爲起點。（並節省大量的時間） – Tim

是蒂姆，如果你可以建議我任何插件？（我已經看過） –

背景動畫效果不需要任何插件。它使用簡單的CSS轉換，如下所示：http://jsfiddle.net/32a4d/ –

這裏有一個工作搗鼓幾乎他們正在做他們的網站上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'}); 
    }); 
});

來源

2013-07-12 20:52:15 rgoraya

在背景上滑動效果圖片

回答

相關問題