移动端点击图片放大特效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 浏览器判断实现函数
Aug 20 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
Vue精简版风格指南(推荐)
Jan 30 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 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
windows xp下安装pear
2006/12/02 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
如何使用Javascript中的this关键字
2020/05/28 Javascript
Python中类的继承代码实例
2014/10/28 Python
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python中数字是否为可变类型
2020/07/08 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
美国网上花店:JustFlowers
2017/02/12 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
美术国培研修感言
2014/02/12 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
五五普法心得体会
2014/09/04 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
英文导游词
2015/02/13 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android