虚位以待(AD)
虚位以待(AD)
首页 > 网页特效 > JavaScript > 移动端点击图片放大特效PhotoSwipe.js插件实现

移动端点击图片放大特效PhotoSwipe.js插件实现
类别:JavaScript   作者:码皇   来源:互联网   点击:

这篇文章主要为大家详细介绍了移动端点击图片放大特效PhotoSwipe js插件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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点击图片放大 移动端点击图片