在線演示 本地下載

觸摸設(shè)備越來(lái)越流行了，很多互聯(lián)網(wǎng)用戶都使用ipad等平板電腦來(lái)瀏覽網(wǎng)頁(yè)和網(wǎng)站。今天我們介紹一款來(lái)自于著名web設(shè)計(jì)師Martin的jQuery插件- touchtouch ，使用它可以快速幫助你生成一個(gè)針對(duì)平板觸摸電腦優(yōu)化的圖片畫廊。所有你需要做的只是提供一套圖片地址，相信大家一定會(huì)喜歡！

主要特性

• 平滑的CSS3動(dòng)畫和過(guò)渡特效
• 一個(gè)支持響應(yīng)式布局設(shè)計(jì)的CSS接口，能夠根據(jù)設(shè)備屏幕變化
• 圖片預(yù)先加載
• 支持觸摸滑動(dòng)
• 顯示箭頭并且響應(yīng)按鍵keypress

如何使用

倒入插件的JS和CSS，及其jQuery1.7及其以上類庫(kù)：

      <link rel="stylesheet" href="css/touchTouch.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/touchtouch.jquery.js"></script>
    

HTML代碼

      <div id="thumbs">
 <a href="img/2011-mv-agusta-brutale-920-black-4.jpg" style="background-image:url(img/2011-mv-agusta-brutale-920-black-4.jpg)" title="agusta-brutale-920"></a>
 <a href="img/2011-mv-agusta-brutale-920-black-10.jpg" style="background-image:url(img/2011-mv-agusta-brutale-920-black-10.jpg)" title="agusta-brutale-920"></a>
 <a href="img/ducati-vyper-concept-luca-bar-black.jpg" style="background-image:url(img/ducati-vyper-concept-luca-bar-black.jpg)" title="vyper-concept-luca-bar-black"></a>
 <a href="img/2012-Ducati-1199-Panigale-18-635x475.jpg" style="background-image:url(img/2012-Ducati-1199-Panigale-18-635x475.jpg)" title="Ducati-1199-Panigale"></a>
 <a href="img/2012-Ducati-1199-Panigale-20-635x475.jpg" style="background-image:url(img/2012-Ducati-1199-Panigale-20-635x475.jpg)" title="Ducati-1199-Panigale"></a>
 <a href="img/2012-Ducati-1199-Panigale-21-635x475.jpg" style="background-image:url(img/2012-Ducati-1199-Panigale-21-635x475.jpg)" title="Ducati-1199-Panigale"></a>
 <a href="img/2012-Ducati-Streetfighter-848-4-635x475.jpg" style="background-image:url(img/2012-Ducati-Streetfighter-848-4-635x475.jpg)" title="Ducati-Streetfighter-848"></a>
 <a href="img/2012-Ducati-Streetfighter-848-6-635x475.jpg" style="background-image:url(img/2012-Ducati-Streetfighter-848-6-635x475.jpg)" title="Ducati-Streetfighter-848"></a>
 <a href="img/2012-Ducati-Streetfighter-848-51-635x475.jpg" style="background-image:url(img/2012-Ducati-Streetfighter-848-51-635x475.jpg)" title="Ducati-Streetfighter-848"></a>
</div>

    

Javascript代碼

      $(function() { 
 $('#thumbs a').touchTouch(); 
});
    

是不是很簡(jiǎn)單，希望大家能夠喜歡這個(gè)插件！

來(lái)源： 分享一個(gè)針對(duì)觸摸設(shè)備優(yōu)化的圖片幻燈jQuery插件 - touchtouch