h5制作微信朋友圈点击大图

需要做一个类似微信朋友圈点击照片显示大图, 并且可以左右滑动查看其它图片的效果.

在网上学习了很多例子, 最终决定根据提供在路上的愚人同学的demo的来修改.

首先是photoswipe插件. 可以在github下载.

使用方法:

1. 先引入相关的js和css

<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">
<script src="js/photoswipe.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>

2. 加入pswp模板

实现这个组件, 需要在页面上用到一套pswp的class, 里面包含了点击大图时底下的蒙版, 还有左右滑动的控件, 以及大图的container, 总之就是==必须要有==的一套dom结构. 由于坐着没有把它写到js里, 所以要自己手动添加到需要打开图片的html页面里. 也可以自己封装起来.

它在图片尚未打开相册前没有任何行为, 所以直接加在页面中完全没问题.最好是加在页面的最底部最后一个div的后面. 不在任何一个有页面行为的div里. 我这次是把封在了一个js里加在了最后面即

转载于:https://www.cnblogs.com/darthbadwolf/p/7694206.html