自定义图片查看器：touch.js与zepto.js实现滑动、缩放与双击功能

本文档主要介绍了如何利用百度touch.js手势库和zepto.js框架开发一个自定义图片查看器插件。作者在寻找现成解决方案时发现资料匮乏，因此决定通过编程实现图片的滑动浏览、双指缩放以及双击放大功能。具体实现包括以下几个关键部分： 1. **基础设置**： - 使用CSS样式清除默认样式，如`: *{padding:0;margin:0;list-style:none;}`，确保图片查看器的干净布局。 - 创建两个类 `.syswin-swipe-show` 和 `.syswin-swipe-hide`，分别用于显示和隐藏图片列表。 2. **图片容器**： - `.molong-swiper` 是图片查看器的主要容器，设置了 `position: fixed` 使其固定在页面上，`z-index: 999` 提供较高的层级以便于其他元素覆盖。 - `.molong-swiper-item` 包含图片列表项，设置 `overflow: hidden` 隐藏超出容器的部分，并使用 CSS3 属性处理背景图片的填充、位置和重复。 3. **图片列表和元素**： - `.molong-img-list` 和 `.molong-img-listli` 分别表示图片的容器列表和单个图片元素。 - `.img-bg` 类用于设置大图的样式，如全屏显示、无边框等。 4. **JavaScript代码**： - 通过 `var molong = molong ? molong : {}` 判断变量是否存在，然后初始化图片查看器的行为。这部分代码可能包含了触摸事件监听、滑动和缩放的逻辑，以及双击放大功能的实现。 5. **问题与改进**： - 作者提到虽然插件基本可用，但滑动有时不够流畅，这可能是由于性能优化不足或触控事件处理机制不够精细导致的。后续计划对这些问题进行优化，并欢迎读者提供改进意见。 6. **资源链接**： - 源码地址：[https://github.com/GLwen/molong_photoSwipe.git](https://github.com/GLwen/molong_photoSwipe.git)，开发者可以在此找到完整的代码和文件。 - 演示地址：[http://runjs.cn/detail/iceaaogh](http://runjs.cn/detail/iceaaogh)，用户可以直接查看实际效果。 总结，这篇文章的核心知识点是使用touch.js和zepto.js开发一个功能完备的图片查看器，包括滑动浏览、双指缩放和双击放大。同时，作者也分享了开发过程中的问题和未来优化方向，对于想要学习或扩展类似功能的开发者来说，这是一个有价值的参考资料。