今天來整理一下 JQuery Tools Scrollable,他是一個滑動效果的 JQuery Tools UI 。

UI 效果:(使用瀏覽器 Firefox 3.5 )

2010-04-06_131515

程式碼:

在HTML中加入下方內容(圖片使用 JQuery Tools 提供圖片)

<a class="prevPage browse left"></a>
 
<div class="scrollable" id="infinite">    
    
    <div class="items">
    
        <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
        <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
        <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
 
        <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
        <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
        
 
        <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
        <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
        <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
        <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
        <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />            
 
        <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
        <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
        <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
        <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
        <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
    </div>
    
</div>
 
<a class="nextPage browse right"></a>

 

在HTML中加入下方 JavaScript


$(document).ready(function() {
    $("#infinite").scrollable();    
});

 

範例檔:JQuery_Tools_Scrollable.RAR

參考網站:http://flowplayer.org/tools/index.html

iammic 發表在 痞客邦 PIXNET 留言(0) 人氣()