移动端点击图片放大特效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 相关文章推荐
IE bug table元素的innerHTML
Jan 11 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
vue内置组件component--通过is属性动态渲染组件操作
Jul 28 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
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
Yii实现简单分页的方法
2016/04/29 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
Swiper实现轮播图效果
2017/07/03 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[00:10]神之谴戒
2019/03/06 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python中协程用法代码详解
2018/02/10 Python
django删除表重建的实现方法
2019/08/28 Python
群胜软件Java笔试题
2012/09/29 面试题
施工安全协议书
2013/12/11 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
《活见鬼》教学反思
2016/02/24 职场文书