滾動UL列表向上和向下的鏈接帶班

我要滾動新聞文章列表向上和向下取決於哪個按鈕被點擊滾動UL列表向上和向下的鏈接帶班

我想動畫的這種方式適應如果可能的話：

function smoothAdd(id, text) 
{ 
    var el = $('#scroller' + id); 

    var h = el.height(); 

    el.css({ 
     height: h, 
     overflow: 'hidden' 
    }); 

    var ulPaddingTop = parseInt(el.css('padding-top')); 
    var ulPaddingBottom = parseInt(el.css('padding-bottom')); 

    el.prepend('<li>' + text + '</li>'); 

    var first = $('li:first', el); 
    var last = $('li:last', el); 

    var foh = first.outerHeight(); 

    var heightDiff = foh - last.outerHeight(); 

    var oldMarginTop = first.css('margin-top'); 

    first.css({ 
     marginTop: 0 - foh, 
     position: 'relative', 
     top:  0 - ulPaddingTop 
    }); 

    last.css('position', 'relative'); 

    el.animate({ height: h + heightDiff }, 1500) 

    first.animate({ top: 0 }, 250, function() { 
     first.animate({ marginTop: oldMarginTop }, 1000, function() { 
      last.animate({ top: ulPaddingBottom }, 250, function() { 
       last.remove(); 

       el.css({ 
        height: 'auto', 
        overflow: 'visible' 
       }); 
      }); 
     }); 
    }); 
} 

    $('.scrollUp').click(function() { 
     smoothAdd('scrollUp', 'A new item'); 
    });

例這裏：http://www.fiveminuteargument.com/blog/scrolling-list

我的HTML看起來像這樣：

<ul id="scroller"> 
     <li class="current"><span>/</span><a href="#article1">News Article Title</a></li> 
     <li><span>/</span><a href="#article2">News Article Title 2</a></li> 
     <li><span>/</span><a href="#article3">News Article Title 3</a></li> 
    </ul> 
    <div class="btnWrap"><p><a href="#arrow" class="scrollUp">Scroll Up</a> 
    <a href="#arrow" class="scrollDown">Scroll Up</a></p></div>

任何人都可以指向正確的方向嗎？

基本上保持動畫風格，但保持它作爲一個普通輪播的定義的UL。

來源

2011-10-30 Andy

任何幫助將不勝感激 – Andy

這裏：http://jsfiddle.net/sDedY/13/

我寫過表格。正如你注意到我已經直接在css文件中添加css，它比通過jquery添加css更好，特別是對於未來的mainenance/decorateion等。但是我沒有花費很多時間來進行不同的調整。這是我猜想的一個藍圖，你可以修改並使其更好，就像使頂部和底部結合使功能變小或類似的東西，我jsut沒有時間了......所以再次：重做基於CSS的計算你自己並修改它！

編輯：關於可變高度，你需要記住，我還沒有最終確定整個功能。編碼此功能的下一步是自動計算margin-top和top，而不是手動輸入它們，這很容易。所有需要的是傳遞一個變量來獲取li元素的位置和尺寸，然後將它們傳遞給我們的代碼。

來源

2011-11-08 08:01:29

我明天有期末考試（這是一個藥檢，如果我們失敗，我們必須重複整年!!!），但我發現你的問題足夠有趣，花3個小時就可以了：D –

ps對於其他人，請隨時使用我的代碼，但如果你提到我的別名（hakim-sina）我真的很感激它>< –

您的解決方案不支持高度可變的項目，正如Andy發佈 –

我已經改變你的代碼的幾行：

var el = $('#scroller' + id);到var el = $('#' + id);

和

smoothAdd('scrollUp', 'A new item');到smoothAdd('scroller', 'A new item');

看到http://jsfiddle.net/nCWAP/

來源

2011-11-01 15:36:32

向下滾動不起作用btw – jyore

我們可以讓滾動下來工作？ – Andy

如果我們只是有一個李的完整列表，而不是添加我們只是隱藏或顯示它們的文本，以相同的效果。當它到達列表頂部時，它會停止？ – Andy

我做了一個稍微簡單的解決方案。檢查出來here

你不需要與absolute或relative位置都不與top位置。該列表有height爲auto所以它的增長/收縮根據自己li元素

編輯現在的高度會自動調整以顯示所有項目的高度。

還支持任意高度的li元素。

來源

2011-11-08 10:03:53

是的，這是一個明顯的選擇這樣的事情，但如果你注意到了這個問題，安迪想要的效果，以及... –

效果被添加 –

正如我前面提到的，你的代碼是definitly實現簡單版本的固定方式andy想要，但是如果你注意到安迪發佈的源代碼，那不是你創建的效果...看看我的代碼 –

滾動UL列表向上和向下的鏈接帶班

回答

相關問題