iOS 图片放大后文字模糊_HTML

指势触控

简介

       PhotoSwipe 是专为移动触摸设备设计的相册/画廊，支持触控网页上所有内容放大缩小，兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。



使用方法

1、引入文件

    1. <!-- 必须先引用klass,如需要提高加载速度,可以给 script加上defer 标记/属性-->  
2. <script type="text/javascript" src="klass.min.js"></script>  
3. <!-- 重要提示,如果不使用jQuery版本，在IE下面会出错，当然，使用jQuery版本，则需要引入jQuery-->  
4. <script type="text/javascript" src="code.photoswipe-3.0.5.min.js"></script>

    调用代码

    /* 添加DOMContentLoaded 事件监听,类似于jQuery的 ready函数. 
     
  默认方式 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);

    如果使用

    jQuery ，则调用代码如下： 

    // 示例详见examples/02-jquery.html


      1. $(document).ready(function(){  
2. // 此处的对象，就是PhotoSwipe实例，可以使用相应的方法,例如 show(0),hide()等.  
3. var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });  
4. });


      2、HTML


      <!-- ul li 之类是用于显示缩略图的,也可以根据需要调整.<a>下面的<img> 元素,即为缩略图,如果不需要，则src设置为空即可 -->   



      1. <ul id="Gallery">  
2. <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>  
3. <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>  
4. <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>  
5. <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>  
6. <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>  
7. <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>  
8. </ul>

      参数说明


      自定义函数 


        1. getToolbar: function(){  
2. /*返回 要在Toolbar之中显示的HTML字符串*/  
3. },  
4. getImageSource: function(el){  
5. /* 告诉 gallery如何获取图片的src,
6.      默认情况下,gallery假设你使用<a>标签包装了<img>缩略图，而<a>标签的href属性即为完整图片的URL。
7.      此时可以使用本方法来返回对应元素的图片的路径。可以是各种各样的。比如rel属性什么的。有jQuery那就更简单了。
8.     */  
9. return el.getAttribute('rel');   
10. },  
11. getImageCaption: function(el){  
12. /**
13.     如同 getImageSource 方法一样，此方法返回图片的标题，默认情况下gallery查找图片的alt 属性。
14.     */  
15. },  
16. getImageMetaData: function(el){  
17. /**
18.     如果你监听了 onDisplayImage,那么你可以通过此函数获取额外的元信息.并在 onDisplayImage中使用
19.     */  
20. return {  
21. 'data-long-description')  
22.     }  
23. }  
24.


        针对android 手机一次点按，会引起一层关闭后,底上的层依然会触发点击事件的问题，我们的解决方案如下:


          1. // 在android 手机上多个层次触发点击,我们采用的是用定时器进行拦截  
2.   
3. var event_timeout = 500;// 预防多次事件触发   
4. // 阻止短时间内连续事件  
5. var multiClickPrevent = false;  
6. function preventMultiClick(){  
7. if(multiClickPrevent){  
8. return false;  
9.     }  
10. true;  
11. function(){  
12. false;  
13.     },event_timeout);  
14. return true;  
15. };  
16.   
17. // 适配浏览器  
18. var useragent = navigator.userAgent;  
19. var likeIOS = useragent.match(/iPad|iPhone|iPod/i);  
20. var likeAndroid = useragent.match(/android/i);  
21. var specialClick = "click";  
22. if(likeIOS){  
23. "touchstart click";  
24. } else if(likeAndroid){  
25. "touchstart click";  
26. }  
27.   
28. / 示例  
29. $(".t_right").live(specialClick,function(){  
30. if(preventMultiClick()){   
31. // 执行其他操作  
32. else {  
33. // else 就是拒绝操作啦,可以直接返回 false 之类的  
34. return false;  
35.     }  
36. });  
37. // 示例  
38. $("body").live(specialClick,function(){  
39. if(preventMultiClick()){  
40. // 执行其他操作  
41.     }  
42. });




          官网：http://photoswipe.com/ GitHub：https://github.com/dimsemenov/photoswipe （亲测好用）