移动端点击图片放大特效PhotoSwipe.js插件实现


Posted in Javascript onAugust 25, 2016

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
js Date概念详细介绍
Nov 22 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
jQuery组件easyui基本布局实现代码
Aug 25 #Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
You might like
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
django 将model转换为字典的方法示例
2018/10/16 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python图像读写方法对比
2020/11/16 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
财务会计毕业生自荐信
2013/11/02 职场文书
应聘美工求职信
2013/11/07 职场文书
市场部管理制度
2014/02/02 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
防卫过当辩护词
2015/05/21 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers