jQuery的，因爲與項目DIV一個變量，如何滾動一個項目到左邊

我有以下jQuery的，因爲與項目DIV一個變量，如何滾動一個項目到左邊

<div id="big" style="width:100%"> 
<div id="slider"> 
    <div class="item" id="item1"><img src="some50x50.jpg" /></div> 
    <div class="item" id="item2"><img src="some50x50.jpg" /></div> 
    <div class="item" id="item3"><img src="some50x50.jpg" /></div> 
    <div class="item" id="item4"><img src="some50x50.jpg" /></div> 
</div>  
</div>

CSS：

.item {text-align:center;float:left;width:50px;}

的ID = BIG DIV可以隨意寬度，500像素，800像素等...基於瀏覽器大小

我想用jQuery能做什麼是滑動項目，如項目3，一直到左邊的div id = slider。

我被卡住的地方是如何找到物品的偏移量以知道滑動的距離。

如果將是巨大的，如果有辦法說移動項目3一路DIV ID滑塊左側...

想法？

來源

2010-10-20 user479959

有什麼錯'浮動：左;'？ – jcolebrand 2010-10-20 20:44:44

這將是一個jQUery函數...所有項目都顯示。然後當你點擊一個項目時，該項目需要一路向左滾動。動畫... – user479959 2010-10-20 20:46:20

這不是最好的解決方法，但這應該讓你開始：

$(function() { 
    $('#slide').click(function() { 
     var bigLeft = $('#big').position().left; 
     var item = $('.item:eq(2)'); 
     var itemLeft = item.position().left; 
     var itemTop = item.position().top; 
     item.css({ 
      position: 'absolute', 
      float: 'none', 
      display: 'inline', 
      top: itemTop, 
      left: itemLeft 
     }).animate({ 
      'left': bigLeft 
     }); 
    }); 
});

基本上，jQuery讓它，這樣你實際上並不需要知道多遠，您的項目滑動，你只需要瞭解其最終目的地。當你做動畫的時候，你還必須修改這個項目的位置，因爲當它向左浮動時，你不能按照你想要的方式來設置動畫。

一旦你爲這個物品設置了一個穩固的位置，你只需要撥打.animate()並告訴它動畫物品的左側位置以匹配你的大div的左側位置。

這裏有一個演示顯示這個動作：http://jsfiddle.net/Ender/Jbrqh/

來源

2010-10-20 21:06:06 Ender

這是一個非常有趣的方法。任何思想恢復？這會移動它，把它移回去呢？謝謝！ – user479959 2010-10-20 21:16:04

這隻會讓它跳回到原來的位置（而不是動畫），但是你可以刪除css位置並將其浮動：再次離開。在這裏看到一個演示（發生在幻燈片的交替點擊中）：http://jsfiddle.net/Ender/2U2A7/您也可以嘗試在滑動之前記錄左側位置，然後將其設置回該位置。 – Ender 2010-10-20 21:51:06

jQuery的，因爲與項目DIV一個變量，如何滾動一個項目到左邊

回答

相關問題