移動端點擊圖片放大特效PhotoSwipe.js插件實現(xiàn)
PhotoSwipe插件能實現(xiàn)手機端點擊圖片全屏放大 再雙擊圖片放大等功能
PhotoSwipe插件官方網(wǎng)站 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>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
一文看懂如何簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)
這篇文章主要給大家介紹了如何通過一文看懂簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-09-09JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼
本篇文章主要介紹了JavaScript實現(xiàn)的可變動態(tài)數(shù)字鍵盤控件方式實例代碼,具有一定的參考價值,有興趣的可以了了解一下2017-07-07Web?Components使用生命周期回調(diào)函數(shù)實例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10JavaScript數(shù)組類型Array相關的屬性與方法詳解
這篇文章主要給大家介紹了關于JavaScript數(shù)組類型Array相關的屬性與方法的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-09-09使用threejs實現(xiàn)第一人稱視角的移動的問題(示例代碼)
第一人稱視角的場景巡檢主要需要解決兩個問題,人物在場景中的移動和碰撞檢測。移動與碰撞功能是所有三維場景首先需要解決的基本問題,今天我們就通過最基本的threejs來完成第一人稱視角的場景巡檢功能,感興趣的朋友一起看看吧2022-02-02