移动端和PC端都兼容的图片滑动切换展示效果 | 您所在的位置:网站首页 › 照片滑动展示 › 移动端和PC端都兼容的图片滑动切换展示效果 |
介绍一款兼容移动端和PC端的图片滑动切换展示效果—PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于HTML和Javascript实现,无需依赖任何第三方库,可应用于图集、相册展示等场景。
如何使用 PhotoSwipe独立于其他js框架,可以非常方便的融入其他诸如CMS系统中。 1.引入css和js文件。 你可以到github上下载最新源码,也可以使用npm install photoswipe方式安装。 除了加载photoswipe核心js和css外,我们还定制了photoswipe的UI样式,提供小图标和动画效果。 2.添加PhotoSwipe元素到DOM中 我们可以使用JS动态的将html代码添加到页面中,也可以在页面的中直接添加html代码。 注意,上述代码中的pswp__bg, pswp__scroll-wrap, pswp__container, pswp__item不可随意更改。 3.初始化 文件和DOM都准备好之后,使用js来调用PhotoSwipe: var pswpElement = document.querySelectorAll('.pswp')[0]; var items = [ { src: 'https://placekitten.com/600/400', w: 600, h: 400 }, { src: 'https://placekitten.com/1200/900', w: 1200, h: 900 } ]; var options = { index: 0 // start at first slide }; var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init();很显然,pswpElement是指定位当前图片展示区域的元素,PhotoSwipeUI_Default是UI样式,items是滑动图片组,数组形式,options是选项设置。 通过new PhotoSwipe()就可调用了。 选项设置options PhotoSwipe提供了丰富的选项设置,可以满足各种开发需求。以下列举一些常用的选项: index:开始的滑块(图片),必须为数字,默认0(第一张) showHideOpacity:当调用时是否展示透明度和比例变化动画,默认false。 showAnimationDuration:展示动画过渡时间,默认333,数字。 hideAnimationDuration:隐藏动画过渡间隔时间,默认333,数字。 maxSpreadZoom:最大放大倍数。 loop:是否循环展示图片,当左右滑动图片时。 closeOnScroll:在页面上滚动关闭图集, 仅适用于没有硬件触摸支持的设备。 escKey:是否可以使用Esc键关闭图集,默认true。 arrowKeys:是否可以使用左右方向键导航切换,默认true。 history:是否使用history模式,默认true,历史记录模式支持url返回。 galleryUID:当多个图集时,用来表示某个图集,默认1,数字,URL会变成http://example.com/#&gid=1&pid=2 galleryPIDs:表示某一张图片,配合图集galleryUID一起使用。 preload:预加载,数组,默认[1,1],是指在切换图片时,预先懒加载前后图片的张数,不能小于1。 API方法 PhotoSwipe也提供了许多方法调用,以下方法有可能你会用得到: var pswp = new PhotoSwipe( /* ... */ ); pswp.init(); //初始化 pswp.goTo(index); //跳到第几张图 pswp.next(); //下一张 pswp.prev(); //上一张 pswp.close(); //关闭图集 pswp.destroy(); //关闭图集后销毁图集 // 动态添加图片 pswp.items.push({ src: "path/to/image.jpg", w:1200,h:500 }); 结束语 PhotoSwipe天生有着触控特性,转为触摸设备而设计,支持手势缩放、手势滑动切换和关闭。支持动画展示图集,支持分享和下载图片接口,支持懒加载图片,支持桌面pc、移动设备的主流浏览器。但是我们在应用中需要注意以下两点: 1.PhotoSwipe需要预定义的图像尺寸,也就是说需要预先知道图片的长和宽。 2.避免为移动设备提供大图片(大于2000x1500像素),因为它们会大大降低动画性能,并可能导致崩溃(特别是在iOS Safari上)。 官网:http://photoswipe.com/ github:https://github.com/dimsemenov/photoswipe |
CopyRight 2018-2019 实验室设备网 版权所有 |