移动端点击图片放大特效PhotoSwipe.js插件实现
2016-08-25 15:15
1111 查看
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 手机端点击图片放大特效PhotoSwipe.js插件实现
- 手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
- 使用lightbox插件实现js点击图片放大并能关闭的效果
- photoswipe.js——移动端图片文字放大缩小
- 移动端图片放大滑动查看-插件photoswipe的使用
- js实现图片点击弹出放大效果(无插件)
- jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
- 移动端图片放大滑动查看-插件photoswipe的使用
- 自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6
- 黄聪:手机移动端建站Jquery+CSS3+HTML5触屏滑动特效插件、实现触屏焦点图、图片轮展图
- 相册展示PhotoSwipe.js插件实现
- JS实现的防Windows的图片放大特效代码
- js图片点击放大特效代码
- JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
- jquery实现移动端点击图片查看大图特效
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
- jQuery插件zoom实现图片全屏放大弹出层特效
- jquery插件orbit.js实现图片折叠轮换特效
- jQuery图片特效插件Revealing实现拉伸放大
- 一个简单的js特效,点击放大图片