Давайте сначала посмотрим на несколько визуализаций:
Нажмите на одну из фотографий, чтобы увеличить, что может поддерживать описание текста изображения:
Функция обмена поддержкой:
Поддержать увеличение жеста и увеличить
Использование JS Framework - это PhotoSwipe.
PhotoSwipe-это плагин для увеличения изображения, совместим с ПК и мобильными терминалами. Он испытал несколько версий и постоянно обновляется. У него есть бесчисленные ошибки и обладает огромными преимуществами на мобильных терминалах.
1. может контролировать различные стили, такие как:
Заголовок, поделиться, кнопки с полным экраном, нажмите «Событие», «Добавить субтитры», «Прозрачный фон» и т. Д.
2. Он может поддерживать мобильные жесты, совместимые с терминалом ПК
Все базовые жесты поддерживают: Сдвиньте следующий или предыдущий, перетаскивайте сковороду, масштаб, масштаб или закрыть, нажмите, чтобы переключить элементы управления и дважды щелкните, чтобы увеличить или увеличить.
3. Поделиться
У пользовательского интерфейса по умолчанию есть кнопка, чтобы поделиться ссылкой. Ссылки по умолчанию - Facebook, Twitter и Pinterest, но вы можете установить тип обмена через API.
4. Пользовательский интерфейс
Пользовательский интерфейс полностью отделен от сценария Core. Интерфейс может быть настроен полностью. Пользовательский интерфейс по умолчанию отзывчив и может быть полностью использован на рабочих столах, планшетах и мобильных устройствах.
5. Больше функций ждет вас, чтобы обнаружить.
Официальный веб -сайт: http://photoswipe.com/
github: https://github.com/dimsemenov/photoswipe
1. Скачать PhotoSwipe на официальном сайте и представить его на странице
<link rel = "prefetch StyleSheet" hRef = "css/photoswipe.css"> <link rel = "prefetch stylesselet" href = "css/default-skin/deflie-skin.css"> <script src = "js/photoswipe.js"> </script> <script src = "js/photoswipe-ui-default.min.js"> </script>
2. Следующая структура кода должна быть добавлена на страницу (эта структура представляет собой код, необходимый для просмотра образа плагин. Автор не интегрировал в JS, поэтому пользователь должен вручную добавить его на свою собственную веб-страницу):
<!- корневой элемент PhotoSwipe. Должен иметь класс PSWP. -> <div tabindex = "-1" rol = "dialog" aria-hidden = "true"> <!-Фон PhotoGhipe. Это отдельный элемент, поскольку анимирующая непрозрачность быстрее, чем rgba (). -> <div> </div> <!-Слайд-обертка с переполнением: скрыто. -> <div> <!-Контейнер, который удерживает слайды. PhotoSwipe держит только 3 из них в DOM, чтобы сохранить память. Не изменяйте эти 3 элементы PSWP__Item, данные добавляются позже. -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <!-По умолчанию (Photoswipeui_default) Интерфейс поверх области скольжения. Можно изменить. -> <div> <div> <!-Управление самостоятельны. Порядок может быть изменен. --> <div></div> <button></button> <button></button> <!-- element will get class pswp__preloader--active when preloader is running --> <div> <div> <div> <div></div> </div> </div> </div> </div> </div> </div> <div> <div></div> </div> </div> </div> <div> <div> </div> </div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Добавьте код структуры PhotoSwipe в картинки, которые вам нужно просмотреть. На что вам нужно обратить внимание на
Data-Pswp-UID должен быть уникальным в каждом альбоме. Размер данных-это ширина и высота изображения при увеличении. Если указанная ширина и высота не совпадают с изображением, отображаемое изображение будет деформировано. Невозможно удалить размер данных, но если у вас есть время, вы можете найти альтернативу.
<!-Data-Pswp-UID должен быть уникальным в каждом альбоме. Размер данных Указывает ширину и высоту изображения при увеличении увеличения-> <div Data-pswp-uid = "1"> <Icrigure> <a href = "img/m3.jpg" data-size = "670x712"> <img src = "img/th1.jpg"> </a> </figure> </div> </div> </div> </div> </div> </div>
4. Добавить код JS. Автор этого кода не был интегрирован в фреймворк PhotoShipe. Ему нужно вручную добавить его на веб -страницу.
<script type = "text/javascript"> var initphotoswipefromdom = function (galleryselector) {// parse slide data from elements (url, заголовок, размер ...) // (дети галлеризаректора) var parsethumbnailelements = thumbelments = thumbelments = thumbelments = thumbelmentions = thumbelments. Linkel, размер, элемент; for (var i = 0; i <numnodes; i ++) {FigureEl = Thumbelements [i]; // <Рисунок> Элемент // Включите только узлы элементов, если (Figure.NodeType! == 1) {продолжение; } 25 Linkel = FigureL.Children [0]; // <a> element size = linkel.getAttribute ('size'). Split ('x'); // Создать элемент Slide Object = {src: linkel.getattribute ('href'), w: parseint (size [0], 10), h: parseint (size [1], 10)}; if (figure.children.length> 1) {// <FigCaption> content item.title = figure.children [1] .innerhtml; } if (linkel.children.length> 0) {// <img> Узел миниатюра, поиск URL -адреса url. } item.el = фигура; // Сохранить элемент ссылки для getThumbboundsfn items.push (item); } вернуть элементы; }; // Найти ближайший родительский узел var ближайшего = функция ближе всего (el, fn) {return el && (fn (el)? El: ближайший (el.parentnode, fn)); }; // Когда пользователь нажимает миниатюр, запустите var onthumbnailsclick = function (e) {e = e || window.event; e.preventdefault? e.preventdefault (): e.terurnvalue = false; var etarget = e.target || E.srcelement; // Найти корневой элемент слайда var clickedlistitem = roless (etarget, function (el) {return (el.tagname && el.tagname.touppercase () === 'Figure');}); if (! ClickedListitem) {return; } // Найти индекс нажатого элемента путем цикла через все узлы дочерних узлов // Альтернативно, вы можете определить индекс с помощью данных- атрибут var clickedgallery = clickedlistitem.parentnode, childnodes = clickedlistitem.parentnode.childnodes, numchildnodes = childnodes.length, nodexex = 0, indexes; for (var i = 0; i <numChildNodes; i ++) {if (childnodes [i] .nodeType! == 1) {продолжить; } if (childnodes [i] === clickedListItem) {index = nodeIndex; перерыв; } nodeindex ++; } if (index> = 0) {// open PhotoWipe Если действительный индекс найден OpenPhotosWipe (index, clickedgallery); } вернуть false; }; // Индекс изображения и индекс галереи от URL (#& pid = 1 & gid = 2) var photoswipeparsehash = function () {var hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } var vars = hash.split ('&'); for (var i = 0; i <vars.length; i ++) {if (! vars [i]) {продолжить; } var pare = vars [i] .split ('='); if (pair.length <2) {продолжить; } params [pair [0]] = pair [1]; } if (params.gid) {params.gid = parseint (params.gid, 10); } return params; }; var openphotoswipe = function (index, galleryElement, disableanimation, acruRl) {var pswpelement = document.queryselectorallall ('. Pswp') [0], галерея, опции, элементы; элементы = parsethumbnailelements (галереоэлемент); // параметры параметров = {barssize: {top: 100, внизу: 100}, FullScreenel: false, // поддерживают ли полноэкранная кнопка ShareButtons: [{id: 'weChat', лейбл: «Поделиться weChat», url: '#'}, {id: 'weibo', label: 'sina weibo', '#'}, {id: 'weibo', label: 'sina weibo', '} Метка: 'Сохранить Picture', url: '{{raw_image_url}}', загрузка: true}], // кнопка обмена // define gallery index (для URL) GalleryUID: GalleryElement.getAttribt ('' Data-Pswp-uid '), GetThumbBoundsfn: function (Index) {// getBound Diptuntsfindsfnsfnfn: function (Index) {// getBound DiportsBoundsfints- Thumbnail = элементы [index] .el.getelementsbytagname ('img') [0], // найти миниатюр PageyScroll = window.pageyoffset || document.documentelement.scrolltop, rect = thumbnail.getBoundingClientRect (); return {x: rect.left, y: rect.top + pageyscroll, w: rect.width}; }}; // PhotoSwipe открыт из URL if (acryurl) {if (options.gallerypids) {// parse реального индекса, когда пользовательские ПИТ используются для (var j = 0; j <epect.length; j ++) {if (j] .pid == index) {options.index = j; перерыв; }}} else {// в индексах URL -индексов запускается с 1 опции. index = parseint (index, 10) - 1; }} else {options.index = parseint (index, 10); } // Выход, если индекс не найден, если (isnan (options.index)) {return; } if (disableAnimation) {options.showanimationDuration = 0; } // передавать данные в PhotoSwipe и инициализировать It Gallery = new PhotoSwipe (pswpelement, photoswipeui_default, элементы, параметры); Gallery.init (); }; // Цикл по всем элементам галереи и связывания событий var galereresements = document.queryselectorall (galleryselector); for (var i = 0, l = galleryelements.length; i <l; i ++) {galleryelements [i] .setattribute ('data-pswp-uid', i+1); Галереи [i] .onclick = onthumbnailsclick; } // packse URL и Open Gallery, если он содержит #& pid = 3 & gid = 1 var hashdata = photoswipeparsehash (); if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, галереи [hashdata.gid - 1], true, true); }}; // Выполнить выше функцию initPhotosWipeFromDomd ('. My-Gallery'); </script>Эта статья была составлена в «Краткое описание навыков развития WeChat JavaScript», и все могут учиться и читать.
Я хотел бы порекомендовать учебник по программе WeChat Mini, которая очень обеспокоена: «Учебник по разработке мини -программы WeChat» был тщательно скомпилирован редактором всех, я надеюсь, вам понравится.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.