日期:2012-5-6 来源:GBin1.com
在线演示
本地下载
触摸设备越来越流行了,很多互联网用户都使用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
分享到:
相关推荐
支持响应式触屏手机端的jQuery图片相册展示特效代码,基于jQuery插件lightGallery.min.js实现, 弹出图片显示支持左右按钮切换,可关闭相册展示,插件支持自定义是否循环播放,是否自动播放, 播放的间隔时间,...
在本案例中,我们讨论的是一个名为"martinaglv-touchTouch"的jQuery插件,它专门针对触屏设备优化,为用户提供了一种优雅的方式来浏览和互动图像。"优秀的触控试灯箱画廊"这个标题暗示了这款插件不仅功能强大,而且...
综合改进了zepto和JQuery mobile的touch和swipe功能,下面是DEMO <!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-...
总结起来,这个示例主要展示了如何利用jQuery和一个第三方插件`touchTouch`来创建一个朋友圈式的图片查看体验。通过将图片链接绑定到插件,我们可以实现点击小图显示大图,并提供平滑的左右切换效果,同时考虑了不同...
4. touchTouch.css - 暗示可能包含了一个触摸友好的图片查看器,如TouchTouch插件,让移动端用户也能轻松查看大图。 5. form.css - 专门处理表单样式,确保表单元素在不同浏览器间有统一的呈现。 6. superfish.css...
6. **touchTouch.css**:touchTouch是一个触控友好的图片滑动插件的样式文件,它使得在移动设备上查看大图变得容易,用户可以通过轻扫或点击导航点来浏览相册。 7. **slider.css**:滑块组件是展示摄影作品或突出...
在这个例子中,"touchTouch.zip"可能是一个已经使用"touch"命令创建或更新过的文件,其后缀名".zip"表明它是一个压缩包,通常用于存储和传输一组文件。 ".zip"文件格式是由PKWARE公司开发的,广泛应用于各种操作...
- `touchTouch.css`: 可能是一个用于图片滑动或画廊效果的插件,优化触摸设备的交互体验。 - `superfish.css`: Superfish是一个JavaScript菜单库,提供无闪烁的下拉菜单,对鼠标悬停和触摸设备都有很好的支持。 -...
- `touchTouch.css`:可能与touchTouch插件相关,这个插件允许用户在触摸设备上浏览和缩放图片,提升移动用户体验。 - `stuck.css`:可能涉及固定(sticky)导航栏的样式,即使用户滚动页面,导航栏也会保持在屏幕...
8. **superfish.css**:Superfish是一个jQuery插件,用于创建有下拉菜单的导航栏,支持鼠标悬停和触摸设备。 9. **responsive.css**:响应式样式表,用于根据设备的屏幕尺寸和方向调整页面布局。 10. **reset.css**...
7. **touchTouch.css**:TouchTouch 可能是一个轻量级的JavaScript库,用于实现触摸设备上的图片查看和滑动效果。在移动设备上,它可以提供更好的用户体验,使用户能够轻松浏览和放大相册图片。 8. **reset.css**:...
7. `touchTouch.css`:这可能是用于创建触摸友好的图像滑块或画廊的样式,提升用户在手机或平板上的交互体验。 8. `stuck.css`:可能与固定顶部导航有关,当用户滚动页面时,导航栏会始终保持在屏幕顶部,提高用户...
在测试和调试过程中,Apple还提供了一个名为"TouchIDAuthentication"的示例应用,它展示了如何在实际环境中使用LocalAuthentication框架。你可以通过下载并研究这个项目(如果在压缩包中存在的话)来了解更多的细节...