移动端点击图片放大特效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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
vue-router的两种模式的区别
May 30 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php中的MVC模式运用技巧
2007/05/03 PHP
php时间不正确的解决方法
2008/04/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Angular实现表单验证功能
2017/11/13 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python回调函数用法实例分析
2015/05/09 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
小学生元旦感言
2014/02/26 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
蓝颜请假条
2014/04/11 职场文书
项目工作说明书
2014/07/29 职场文书
上课不认真检讨书
2014/09/17 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
党校毕业个人总结
2015/02/28 职场文书
郭明义电影观后感
2015/06/08 职场文书
龙猫观后感
2015/06/09 职场文书
工作一年自我鉴定
2019/06/20 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技