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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。