Плагин PhotoSwipe может реализовать полноэкранный масштаб на мобильном телефоне и дважды щелкнуть изображение, чтобы увеличить изображение.
Официальный сайт плагина PhotoSwipe http://www.photoswipe.com/
Мобильный клемм Photoshipe расширяется и просмотры, скользят, чтобы переключиться на следующее изображение, и сохранить изображение на локальном.
<style> .pnav {margin-top: 30px; text-align: center; line-height: 24px; Font-Size: 16px} .pnav a {padding: 4px} .pnav a.cur {founale:#007bc4; color: #fff;}. Демо {ширина: 80%; Маржа: 10px Auto}/*Требуемый стиль*/#photos {width: 150px; Граница: 1PX SOLID #D3D3D3; Маржа: 20PX AUTO; Text-Align: Center; Padding: 4px; Cursor: Pointer; положение: относительное} #photos p {position: Absolute; Внизу: 0; слева: 0; накладка: 4px; фон:#000; Цвет: #ffff} .my-Gallery {ширина: 100%; Float: Left;}. My Gallery img {ширина: 100%; Высота: Auto;}. My Gallery Figure {Display: Block; Плавание: осталось; Покрас: 0 5px 5px 0; Ширина: 150px;}. My-Gallery FigCaption {Display: None;} </style>JS -код:
<script type = "text/javascript"> var openphotoswipe = function () {var pswpelement = document.queryselectorall ('. Pswp') [0]; var elects = [{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. }, {src: 'Images/s4.jpg', w: 800, h: 1142}, {src: 'images/s5.jpg', w: 800, h: 1142}]; var options = {история: false, фокус: false, showanimationduration: 0, hideanimationduration: 0}; var Gallery = new Photoswipe (pswpelement, photoswipeui_default, элементы, параметры); gallery.init ();}; document.getElementById ('photos'). onclick = openPhotosWipe; </script>Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.