移动端点击图片放大特效PhotoSwipe.js插件实现
作者:lijiao 时间:2024-04-28 10:21:02
PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能
PhotoSwipe插件官方网站 http://www.photoswipe.com/
photoswipe之移动端图片放大查看,滑动切换下一张,图片保存到本地。
<style>
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav a.cur{background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}
/*必要样式*/
#photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}
#photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery {
width: 100%;
float: left;
}
.my-gallery img {
width: 100%;
height: auto;
}
.my-gallery figure {
display: block;
float: left;
margin: 0 5px 5px 0;
width: 150px;
}
.my-gallery figcaption {
display: none;
}
</style>
js代码:
<script type="text/javascript">
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
{
src: 'images/s1.jpg',
w: 800,
h: 1142
},
{
src: 'images/s2.jpg',
w: 800,
h: 1142
},
{
src: 'images/s3.jpg',
w: 800,
h: 1142
},
{
src: 'images/s4.jpg',
w: 800,
h: 1142
},
{
src: 'images/s5.jpg',
w: 800,
h: 1142
}
];
var options = {
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
document.getElementById('photos').onclick = openPhotoSwipe;
</script>
标签:移动端,photoSwipe.js,图片放大
0
投稿
猜你喜欢
玩转Python发短信的实现
2021-09-17 20:38:54
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2021-07-02 16:53:41
Python包和模块的分发详细介绍
2021-10-06 07:25:32
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
2023-08-18 10:31:11
python中reload(module)的用法示例详解
2021-01-31 10:49:11
python 读txt文件,按‘,’分割每行数据操作
2022-11-11 08:04:17
Tensorflow之MNIST CNN实现并保存、加载模型
2023-10-16 06:21:33
php 中phar包的使用教程详解
2024-03-16 15:38:48
python爬虫请求头的使用
2023-03-21 07:10:23
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2022-02-02 11:08:01
python中实现精确的浮点数运算详解
2022-12-27 07:08:27
矩形相交以及求出相交的区域的原理解析
2023-08-17 18:39:09
在Ubuntu/Linux环境下使用MySQL开放/修改3306端口和开放访问权限
2024-01-14 00:47:02
如何把python项目部署到linux服务器
2023-10-02 14:27:22
PyQt5+serial模块实现一个串口小工具
2021-04-25 00:51:19
SQL Server 总结复习 (二)
2024-01-22 23:14:50
ASP中的面向对象类
2011-04-11 10:34:00
Golang gRPC HTTP协议转换示例
2024-05-21 10:27:07
opencv之为图像添加边界的方法示例
2022-03-25 03:37:20
SQLServer与服务器连接时出错的解决方案
2009-06-28 14:35:00