دعونا نلقي نظرة أولاً على بعض الاداءات:
انقر فوق إحدى الصور لتكبيرها ، والتي يمكن أن تدعم وصف نص الصورة:
وظيفة مشاركة الدعم:
دعم تكبير الإيماءات والتصغير
باستخدام JS Framework هو Photoswipe.
Photoswipe هو مكون إضافي لتوسع الصور ، متوافق مع أجهزة الكمبيوتر الشخصية والمحطات المحمولة. لقد شهدت إصدارات متعددة وتم تحديثها باستمرار. لديها عدد لا يحصى من المزالق ولديه مزايا ضخمة على المحطات المحمولة.
1. يمكن التحكم في مجموعة متنوعة من الأساليب مثل:
العنوان ، مشاركة ، أزرار ملء الشاشة ، انقر فوق الحدث ، سواء لإضافة ترجمات ، خلفية شفافة ، إلخ.
2. يمكن أن تدعم لفتة اللمس المتنقلة متوافقة مع محطة الكمبيوتر الشخصي
تدعم جميع الإيماءات الأساسية: حرك الإيماءات التالية أو السابقة ، سحب المقلاة أو التكبير أو التكبير أو الإغلاق ، انقر للتبديل ، وانقر نقرًا مزدوجًا للتكبير أو التكبير.
3. حصة
يحتوي واجهة المستخدم الافتراضية على زر لمشاركة الرابط. الروابط الافتراضية هي Facebook و Twitter و Pinterest ، ولكن يمكنك تعيين نوع المشاركة من خلال API.
4. واجهة المستخدم
يتم فصل واجهة المستخدم بالكامل عن البرنامج النصي الأساسي. يمكن تخصيص الواجهة بالكامل. تستجيب واجهة المستخدم الافتراضية للفروسية ويمكن استخدامها بالكامل على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والأجهزة المحمولة.
5. المزيد من الوظائف في انتظارك لاكتشافها.
الموقع الرسمي: http://photoswipe.com/
Github: https://github.com/dimsemenov/photoswipe
1. قم بتنزيل PhotoRswipe على الموقع الرسمي وقدمه إلى الصفحة
<link rel = "stylesheet prefect" href = "css/photoswipe.css"> <link rel = "STYLESHEET prected" href = "css/default-skin/default-skin.css"> <script src = "js/photoswipe.js src = "js/photogswipe-ui-default.min.js"> </script>
2. يجب إضافة بنية الكود التالية إلى الصفحة (هذا الهيكل هو الرمز المطلوب لتصفح صور المكونات الإضافية. لم يتم دمج المؤلف في JS ، لذلك يجب على المستخدم إضافته يدويًا إلى صفحة الويب الخاصة به):
<!- عنصر الجذر من Photoswipe. يجب أن يكون لديك فئة PSWP. -> <div tabindex = "-1" rob = "dialog" aria-hidden = "true"> <!-خلفية Photoswipe. إنه عنصر منفصل لأن العتامة المتحركة أسرع من RGBA (). -> <viv> </viv> <!-غلاف الشرائح مع الفائض: مخفي. -> <viv> <!-حاوية تحمل الشرائح. يحتفظ Photoswipe فقط 3 منهم في DOM لحفظ الذاكرة. لا تعدل هذه العناصر 3 PSWP__Item ، تتم إضافة البيانات لاحقًا. -> <viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> <viv> </viv> </viv> <!-الافتراضي (Photoswipeui_default) واجهة أعلى منطقة الانزلاق. يمكن تغييرها. -> <viv> <viv> <!-الضوابط غير واضحة. يمكن تغيير الطلب. -> <viv> </viv> <butten> </ button> <button> </butting> <!-العنصر سيحصل على الفئة pswpmpreloader-نشط عند تشغيل preloader-> <viv> <viv> <viv> <viv> </viv> </siv> </div> </div> </div div> <viv> </div> <///div div> </div div> </ <viv> </viv> </viv> </viv> </viv> <viv> <viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
3. أضف رمز بنية Photoswipe إلى الصور التي تحتاجها لتصفحها. ما تحتاج إلى الانتباه إليه هنا هو
يجب أن تكون Data-PSWP-UID فريدة من نوعها في كل ألبوم. حجم البيانات هو عرض وارتفاع الصورة عند توسيعها. إذا كان العرض والارتفاع المحددين لا يتطابقان مع الصورة ، فسيتم تشوه الصورة المعروضة. لا توجد طريقة لإزالة حجم البيانات ، ولكن إذا كان لديك وقت ، فيمكنك العثور على بديل.
<!-يجب أن تكون Data-PSWP-UID فريدة من نوعها في كل ألبوم. تحدد حجم البيانات عرض وارتفاع الصورة عند التكبير-> <div data-pswp-uid = "1"> <figure> <a href = "img/m3.jpg" size-size = "670x712"> <img src = "img/th1.jpg"> </a> </div>
4. إضافة رمز JS. لم يتم دمج مؤلف هذا الرمز في إطار الضوئيات. يحتاج إلى إضافته يدويًا إلى صفحة الويب.
<script type = "text/javaScript"> var initphotoSwipeFromDom = function (galleryselector) {// parse slide data من عناصر dom (url ، العنوان ، الحجم ...) Linkel ، الحجم ، البند ؛ لـ (var i = 0 ؛ i <numnodes ؛ i ++) {figureel = thumbelements [i] ؛ // <GINEST> element // include element element element if (figureel.nodeType! == 1) {conter ؛ } 25 linkel = figureel.children [0] ؛ // <a> size element = linkel.getAttribute ('size-size'). split ('x') ؛ // إنشاء عنصر كائن الشريحة = {src: linkel.getattribute ('href') ، w: parseint (size [0] ، 10) ، h: parseint (size [1] ، 10)} ؛ if (figureel.children.length> 1) {// <Gigcaption> content item.title = figureel.children [1] .innerhtml ؛ } if (linkel.children.length> 0) {// <img> thumbnail node ، search thumbnail url item.msrc = linkel.children [0] .getAttribute ('src') ؛ } item.el = figureel ؛ // حفظ عنصر الارتباط لـ getThumbboundSfn items.push (item) ؛ } عناصر الإرجاع ؛ } ؛ // ابحث عن أقرب عقدة أولياء var الأقرب = الدالة الأقرب (el ، fn) {return el && (fn (el)؟ el: الأقرب (el.parentnode ، fn)) ؛ } ؛ // عندما ينقر المستخدم على Thumbnail ، فإن Trigger var onThumbnailsClick = function (e) {e = e || window.event ؛ E.PreventDefault؟ e.preventDefault (): e.returnvalue = false ؛ var etarget = e.target || E.Srcelement ؛ // البحث عن عنصر الجذر لـ Slide var clickedListItem = الأقرب (etarget ، function (el) {return (el.tagname && el.tagname.touppercase () === 'figure') ؛}) ؛ if (! clickedListItem) {return ؛ } // العثور على فهرس العنصر الذي تم النقر فوقه عن طريق الحلق من خلال جميع العقد الفرعية // بدلاً من ذلك ، يمكنك تحديد الفهرس عبر data- سمة var clickedgallery = clickedListItem.ParentNode ، childnodes = clickedListItem.ParentNode.childnodes ، numchildnodes = childnodes.length ، nodeindex = 0 ، index ؛ لـ (var i = 0 ؛ i <numChildNodes ؛ i ++) {if (childnodes [i] .nodeType! == 1) {conter ؛ } if (childnodes [i] === clickedListItem) {index = nodeIndex ؛ استراحة؛ } nodeindex ++ ؛ } if (index> = 0) {// فتح photowipe إذا تم العثور على فهرس صالح OpenPhotOswipe (الفهرس ، clickedGallery) ؛ } إرجاع خطأ ؛ } ؛ // Parse Picture Index and Gallery INDEX من url (#& pid = 1 & gid = 2) var photogswipeparsehash = function () {var hash = window.location.hash.substring (1) ، params = {} ؛ if (hash.length <5) {return params ؛ } var vars = hash.split ('&') ؛ لـ (var i = 0 ؛ i <vars.length ؛ i ++) {if (! vars [i]) {conter ؛ } var pair = vars [i] .split ('=') ؛ if (pair.length <2) {contert ؛ } params [pair [0]] = pair [1] ؛ } if (params.gid) {params.gid = parseint (params.gid ، 10) ؛ } إرجاع params ؛ } ؛ var openPhotOswipe = function (index ، galleryelement ، disableanimation ، fromurl) {var pswpelement = document.queryselectall ('. العناصر = parsethumbnailelements (galleryelement) ؛ // خيارات المعلمة = {barssize: {TOP: 100 ، أسفل: 100} ، FullScreenel: false ، // ما إذا كان زر الشاشة ملء sharebuttons مدعوم: [{id: wechat '، label:' share wechat '، url:'#'} ، {id:' weibo '، label: "sina" Picture '، url:' {{raw_image_url}} '، download: true}] ، // share button // define gallery index (for url) galleryuid: galleryelement.getAttribute (' data-pswp-uid ') العناصر [الفهرس] .el.etelementsbytagname ('img') [0] ، // العثور على thumbnail pageyscroll = window.pageyoffset || document.documentElement.scrolltop ، rect = thumbnail.getBoundingClientRect () ؛ إرجاع {x: rect.left ، y: rect.top + pageyscroll ، w: rect.width} ؛ }} ؛ // PhotoRswipe تم فتحه من url if (fromurl) {if (Options.galleryPids) {// parse index at in in at at at at at struction (var j = 0 ؛ j <items.length ؛ j ++) {if (head [j]. استراحة؛ }}} آخر {// في فهارس url تبدأ من 1 Options.Index = parseint (الفهرس ، 10) - 1 ؛ }} else {Options.Index = parseint (index ، 10) ؛ } // exit إذا لم يتم العثور على الفهرس إذا (isnan (Options.Index)) {return ؛ } if (disableanimation) {Options.ShowAnimationDuration = 0 ؛ }. Gallery.init () ؛ } ؛ // loop من خلال جميع عناصر المعرض وأحداث BIND var gallerylements = document.queryselectorall (GALLERYSELECTOR) ؛ لـ (var i = 0 ، l = galleryelements.length ؛ i <l ؛ i ++) {galleryElements [i] .SetAttribute ('data-pswp-uid' ، i+1) ؛ معرضات [i] .onclick = onThumbnailsClick ؛ } // parse url والمعرض المفتوح إذا كان يحتوي على #& pid = 3 & gid = 1 var hashdata = photogswipeparsehash () ؛ if (hashdata.pid && hashdata.gid) {openPhotoswipe (hashdata.pid ، gallerylements [hashdata.gid - 1] ، true ، true) ؛ }} ؛ // تنفيذ الوظيفة أعلاه initphotoswipefromdom ('. my-gallery') ؛ </script>تم تجميع هذه المقالة في "ملخص لمهارات تطوير JavaScript WeChat" ، والجميع مرحب بهم للتعلم والقراءة.
أود أن أوصي برمجيًا لبرنامج WeChat Mini الذي يهتم للغاية: "تم تجميع" WeChat Mini Program Development Tutorial "بعناية من قبل محرر الجميع ، وآمل أن أعجبك.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.