jQuery「滿足團隊」效果

我試圖爲this block創建一個jQuery效果。這個想法是，在鼠標懸停時其他照片「看」在選定的一個。這裏是html代碼。jQuery「滿足團隊」效果

<ul class="team"> 
    <li><img src="pics/team/t-0001.jpg" alt=""/></li> 
    <li><img src="pics/team/t-0002.jpg" alt=""/></li> 
    <li><img src="pics/team/t-0003.jpg" alt=""/></li> 
    ... 
</ul>

理論上我明白，當鼠標在這些li元素之一上時，我必須改變其他元素中的圖像的src值。有幾個陣列需要這些路徑可以存儲。

但實際上我有很大的問題。

我應該先做些什麼？可能有一些例子或插件？

我會很感激任何幫助。

謝謝你的幫忙！對不起，以前不能回答，有很多工作要做。

我找到了解決方案。它非常簡單，並不那麼靈活，但它的工作原理。我正在使用背景圖片。

下面是示例http://jsfiddle.net/KSYUC/4/

來源

2012-08-22 640miles

對於初學者，您可以看到該網站的實施。查看源代碼。 – sachleen

@KseniaMurach編輯我的帖子並帶有樣本以便開始 – Breezer

他們應該跟隨鼠標還是尋找「懸停選定」圖像（當鼠標位於兩張圖像之間時會發生什麼情況）？你能否向我們展示從列表中生成網格的CSS（單元格是否有固定的比例）？ – Bergi

的一種方式，你可以簡化問題，因爲不必每個人的9張圖像，實際上每個人都可以使用一張合成圖像，並有所有可能性。也許這樣的事情（箭頭示出了其中的人應該尋找方向）在一個單一的形象：

Face direction

這可讓您僅通過改變背景位置（使用定期改變方向這是由圖像大小決定的）通過CSS的圖像。它還具有以下優點：臉部的所有可能性同時加載，而不是臉部改變時（可能導致圖像閃爍或需要預加載）。

然後，您必須計算每張臉所用的圖像，具體取決於其相對於所選面的位置。這是座標之間的算術比較問題。

所以如果你對所選的一個面迭代所有面，那麼如果當前的Y高於所選的Y，那麼它將是前三個「子圖像」之一，然後你會比較X以確定它是否小於，等於或大於，以確定三者中的哪一個。這同樣適用於所有三排可能的面。最終歸結爲比較Y和X的更少，更大或更大。這樣你就可以在背景位置計算X和Y的偏移量。

來源

2012-08-22 23:29:17

$('img.smart').hover(function() { 
    $(this).css('background-position':'-150px 0'); 
    }, 
    function() { 
    $(this).css('background-position':'0 0'); 
    }, 
);

把一個「雙重」與顯示塊，寬度和高度的正常圖像的圖像並改變的CSS位置到負和背部。注意：爲每個圖片添加class =「smart」以便更容易jQuery選擇

來源

2012-08-22 22:51:14

那麼，我會推薦您使用json而不是常規數組...爲什麼？那麼你可以爲給定的json對象分配一個用戶名，該用戶名包含該用戶的所有圖像，併爲其他用戶提供相同的內容，然後通過鼠標懸停在該用戶的json對象上。說你有一個像這樣

myvalues = [{"userone":['srcone','srctwo'],"usertwo":['srcone','srctwo']}]

對象的U迭代它像這樣

for (var key in myvalues) { 
    var obj = myvalues[key]; 
    for (var prop in obj) { 
     alert("User:"+prop+" Valueone: "+obj[prop][0]+" Valuetwo:"+obj[prop][1]); 
    } 

}

http://jsfiddle.net/xRuBR/2/

來源

2012-08-22 22:51:57 Breezer

謝謝。將嘗試把它放在一起。 – 640miles

jQuery「滿足團隊」效果

回答

相關問題