移动端点击图片放大特效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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Javascript 继承实现例子
Aug 12 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php慢查询日志和错误日志使用详解
2021/02/27 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
理解python多线程(python多线程简明教程)
2014/06/09 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Pandas中resample方法详解
2019/07/02 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
红领巾广播站广播稿
2014/02/01 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
成绩报告单家长评语
2014/12/30 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL