觸摸設(shè)備越來越流行了，很多互聯(lián)網(wǎng)用戶都使用ipad等平板電腦來瀏覽網(wǎng)頁和網(wǎng)站。今天我們介紹一款來自于著名web設(shè)計(jì)師Martin的jQuery插件- touchtouch ，使用它可以快速幫助你生成一個(gè)針對平板觸摸電腦優(yōu)化的圖片畫廊。所有你需要做的只是提供一套圖片地址，相信大家一定會(huì)喜歡！
主要特性
- 平滑的CSS3動(dòng)畫和過渡特效
- 一個(gè)支持響應(yīng)式布局設(shè)計(jì)的CSS接口，能夠根據(jù)設(shè)備屏幕變化
- 圖片預(yù)先加載
- 支持觸摸滑動(dòng)
- 顯示箭頭并且響應(yīng)按鍵keypress
如何使用
倒入插件的JS和CSS，及其jQuery1.7及其以上類庫：
<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();
});
是不是很簡單，希望大家能夠喜歡這個(gè)插件！
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
