分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
来源:互联网 发布:免费文档加密软件 编辑:程序博客网 时间:2024/05/16 13:46
在线演示 本地下载
触摸设备越来越流行了,很多互联网用户都使用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代码
$(function() { $('#thumbs a').touchTouch(); });
是不是很简单,希望大家能够喜欢这个插件!
来源:分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
- 分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
- 分享一个jQuery的全屏幻灯展示插件:Supersized 3.2
- 分享一个最具有灵活性的jQuery幻灯插件 - Rhinoslider
- 分享另外一个jQuery的超酷幻灯插件:jQuery Chop Slider
- 分享40多个新鲜的jQuery图片和内容幻灯插件
- 分享一个超棒的免费jQuery幻灯插件:Nivo Slider
- 分享一个超棒的响应式幻灯jQuery插件 - refineslide
- 分享一个jQuery的图片预加载插件 - QueryLoader2
- 分享一个jQuery的图片预加载插件:QueryLoader2
- jQuery支持移动触摸设备的Lightbox插件
- 一个基于jQuery Mobile的移动设备实时幻灯javascript类库 - taciónJS
- 超棒片状过渡效果的jQuery图片幻灯插件 - jq-tiles
- jQ.Mobi——针对移动设备优化的jQuery
- 92款jQuery图片展示/幻灯插件开源软件
- 一个强大专业的响应式jQuery幻灯效果插件:Royal Slider
- 分享一个分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
- 分享一个基于jQuery的Cookie插件
- 26个jQuery幻灯插件
- 【LGame入门学堂008.控件篇】简单控件之LButton
- 何优化使用C6000系列C64x的Cache--原理,Cache种类和优化策略
- android 外文翻译
- 分享27个最新国外超酷单页面网站设计
- MVC3从头到尾--查看网站的总体架构
- 分享一个针对触摸设备优化的图片幻灯jQuery插件 - touchtouch
- 分析预测未来五年安卓有望主导移动操作系统
- 分享3个超棒的免费wordpress主题: Splus, EMagazine和BAGONG
- 向量相加(力的合成) 向量相减(力的分解)
- oracle实战第二天--基本查询与复杂查询
- 小食品安全监管需要加强
- Android 读取SIM卡参数
- 八类“求职陷阱”要提防 四类“陷阱合同”不能签
- destoon 系统常量与变量