移动端点击图片放大特效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 相关文章推荐
JavaScript使用prototype定义对象类型
Feb 07 Javascript
JavaScript中的函数嵌套使用
Jun 04 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
原生js实现吸顶效果
Mar 13 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
Javascript原型链及instanceof原理详解
May 25 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
用php解析html的实现代码
2011/08/08 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
会计自我鉴定
2013/11/02 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
个人委托书怎么写
2014/04/04 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
毕业酒会致辞
2015/07/29 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android