Swipe Box 介绍
Swipe Box 是一款可触摸的 jQuery 灯箱 效果 插件 ，可用于桌面，移动和平板电脑。 支持 移动设备滑动手势导航，桌面电脑上可以用 键盘 导航， 不支持 css3 过渡特性的浏览器使用 jQuery 降级处理， 支持 视网膜 显示 ，能够通过 css 轻松定制。
主要特点
在移动端 支持 滑动手势
桌面端 支持 键盘 操作
css transitions with jQuery fallback
支持 视网膜级别的UI图标
简单的css定制
兼容浏览器
Chrome,Safari,Firefox,Opera,IE9+,IOS4+,Android,windows phone. 使用JavaScript 在您的 页面 中 添加 jQuery和swipe Box 脚本<script src="lib/jquery-2.0.3.js"></script><script src="source/jquery.swipe Box .js"></script> css 在您的 页面 中 添加 swipe Box css样式 标签 。<link rel="stylesheet" href="source/swipe Box .css"> html 使用特定的类为你的 链接 和使用title 属性 为 标题 。<a href="big/image.jpg" class="swipe Box " title="My Caption"><img src="small/image.jpg" alt="image"></a> 绑定了“swipe Box ”类。 <script type="text/JavaScript">jQuery(function($) {$(".swipe Box ").swipe Box ();});</script> 使用“rel” 属性 你可以 添加 一个 REL 属性 ，你的 链接 到单独的画廊。<!-- gal lery 1 --><a rel=" gal lery-1" href="big/image1.jpg" class="swipe Box "><img src="small/image1.jpg" alt="image"></a><a rel=" gal lery-1" href="big/image2.jpg" class="swipe Box "><img src="small/image2.jpg" alt="image"></a><!-- gal lery 2 --><a rel=" gal lery-2" href="big/image3.jpg" class="swipe Box "><img src="small/image3.jpg" alt="image"></a><a rel=" gal lery-2" href="big/image4.jpg" class="swipe Box "><img src="small/image4.jpg" alt="image"></a> 视频 支持 只需在您的href 属性 粘贴视频网址。该脚本会 自动 检查它是否是 一个 视频网址，并在打开的swipe Box 视频。<a class="swipe Box -video" rel="视频" href="#">My Videos</a> 动态加载的 幻灯片 你可以通过 一个 数组对象传递给swipe Box 动态设置您的画廊。$("# gal lery").click(function(e){e.preventDefault();$.swipe Box ([{href:'big/image1.jpg',title:'My Caption'},{href:'big/image2.jpg',title:'My Second Caption'}]);}); 刷新 方法 刷新 方法 可以让你重新加载 幻灯片 ，如果在DOM发生了变化。var swipe Box Instance = $(".a:visible").swipe Box ();// Use the refresh method after your event is completedswipe Box Instance.refresh(); 检查打开状态 if ($.swipe Box .isOpen){// do stuff} 选项 <script type="text/JavaScript">jQuery(function($) {$(".swipe Box ").swipe Box ({usecss : true,// false将强制使用的jQuery的动画hideBarsDelay : 3000,// 0始终 显示 标题 和动作条videoMaxWidth : 1140,// 视频最大宽度beforeOpen: function(){},// 被叫开幕前afterClose: function(){} // 被叫结束后});});</script> 链接 : http://www.fly63.com/nav/1428网站地址 : http://brutaldesign.github.io/swipebox/
GitHub: https://github.com/brutaldesign/swipebox
网站描述: 可触摸的 jQuery 灯箱 效果 插件
Swipebox官方网站
官方网站： http://brutaldesign.github.io/swipebox/
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did174592