`

分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch

阅读更多

日期:2012-5-6  来源:GBin1.com

分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch

在线演示   本地下载

触摸设备越来越流行了,很多互联网用户都使用ipad等平板电脑来浏览网页和网站。今天我们介绍一款来自于著名web设计师Martin的jQuery插件-touchtouch ,使用它可以快速帮助你生成一个针对平板触摸电脑优化的图片画廊。所有你需要做的只是提供一套图片地址,相信大家一定会喜欢!

主要特性

  • 平滑的CSS3动画和过渡特效
  • 一个支持响应式布局设计的CSS接口,能够根据设备屏幕变化
  • 图片预先加载
  • 支持触摸滑动
  • 显示箭头并且响应按键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代码

....

来源:分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics