移动端点击图片放大特效PhotoSwipe.js插件实现
PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能
PhotoSwipe插件官方网站http://www.photoswipe.com/
photoswipe之移动端图片放大查看，滑动切换下一张，图片保存到本地。
<style>
.pnav{margin-top:30px;text-align:center;line-height:24px;font-size:16px}
.pnava{padding:4px}
.pnava.cur{background:#007bc4;color:#fff;}
.demo{width:80%;margin:10pxauto}
/*必要样式*/
#photos{width:150px;border:1pxsolid#d3d3d3;margin:20pxauto;text-align:center;padding:4px;cursor:pointer;position:relative}
#photosp{position:absolute;bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery{
width:100%;
float:left;
}
.my-galleryimg{
width:100%;
height:auto;
}
.my-galleryfigure{
display:block;
float:left;
margin:05px5px0;
width:150px;
}
.my-galleryfigcaption{
display:none;
}
</style>
js代码：
<scripttype="text/javascript">
varopenPhotoSwipe=function(){
varpswpElement=document.querySelectorAll('.pswp')[0];
varitems=[
{
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
}
];
varoptions={
history:false,
focus:false,
showAnimationDuration:0,
hideAnimationDuration:0
};
vargallery=newPhotoSwipe(pswpElement,PhotoSwipeUI_Default,items,options);
gallery.init();
};
document.getElementById('photos').onclick=openPhotoSwipe;
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。