指势触控
简介
PhotoSwipe 是专为移动触摸设备设计的相册/画廊，支持触控网页上所有内容放大缩小，兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
使用方法
1、引入文件
- <!-- 必须先引用klass,如需要提高加载速度,可以给 script加上defer 标记/属性-->
- <script type="text/javascript" src="klass.min.js"></script>
- <!-- 重要提示,如果不使用jQuery版本，在IE下面会出错，当然，使用jQuery版本，则需要引入jQuery-->
- <script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>
调用代码
- 默认方式 examples/01-default.html
- 无缩略图模式请查看.examples/09-exclusive-mode-no-thumbnails.html
- */
- // PhotoSwipe.attach 方法接收3个参数(HTML元素集合,可选配置信息,可选多实例时string类型的ID)
- document.addEventListener('DOMContentLoaded', function(){
- //设置 PhotoSwipe绑定为 id为Gallery的容器下的所有<a>标签.点击就会激活
- // 此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如 show(0),hide()等.
- var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );
- }, false);
- $(document).ready(function(){
- // 此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如 show(0),hide()等.
- var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
- });
2、HTML
- <ul id="Gallery">
- <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
- <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
- <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
- <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
- <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
- <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
- </ul>
参数说明
自定义函数- getToolbar: function(){
- /*返回 要在Toolbar之中显示的HTML字符串*/
- },
- getImageSource: function(el){
- /* 告诉 gallery如何获取图片的src,
- 默认情况下,gallery假设你使用<a>标签包装了<img>缩略图，而<a>标签的href属性即为完整图片的URL。
- 此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。
- */
- return el.getAttribute('rel');
- },
- getImageCaption: function(el){
- /**
- 如同 getImageSource 方法一样，此方法返回图片的标题，默认情况下gallery查找图片的alt 属性。
- */
- },
- getImageMetaData: function(el){
- /**
- 如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用
- */
- return {
- longDescription: el.getAttribute(el, 'data-long-description')
- }
- }
针对android 手机一次点按，会引起一层关闭后,底上的层依然会触发点击事件的问题，我们的解决方案如下:
- // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截
- var event_timeout = 500;// 预防多次事件触发
- // 阻止短时间内连续事件
- var multiClickPrevent = false;
- function preventMultiClick(){
- if(multiClickPrevent){
- return false;
- }
- multiClickPrevent = true;
- window.setTimeout(function(){
- multiClickPrevent = false;
- },event_timeout);
- return true;
- };
- // 适配浏览器
- var useragent = navigator.userAgent;
- var likeIOS = useragent.match(/iPad|iPhone|iPod/i);
- var likeAndroid = useragent.match(/android/i);
- var specialClick = "click";
- if(likeIOS){
- specialClick = "touchstart click";
- } else if(likeAndroid){
- specialClick = "touchstart click";
- }
- / 示例
- $(".t_right").live(specialClick,function(){
- if(preventMultiClick()){
- // 执行其他操作
- } else {
- // else 就是拒绝操作啦,可以直接返回 false 之类的
- return false;
- }
- });
- // 示例
- $("body").live(specialClick,function(){
- if(preventMultiClick()){
- // 执行其他操作
- }
- });
再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow
1578
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
