Rumah > hujung hadapan web > tutorial js > Pelaksanaan JavaScript untuk menyokong petua galeri_javascript peranti mudah alih

Pelaksanaan JavaScript untuk menyokong petua galeri_javascript peranti mudah alih

WBOY
Lepaskan: 2016-05-16 15:43:25
asal
1251 orang telah melayarinya

Ini ialah kesan galeri yang tidak bergantung pada mana-mana rangka kerja js dan dilaksanakan dalam javascript tulen. Ia menyokong operasi gerak isyarat peranti mudah alih, seperti gelongsor sentuhan gerak isyarat, mengezum masuk dan menutup gambar, dan ia juga menyokong operasi papan kekunci pada PC Secara ringkasnya, ia adalah pemalam galeri gambar yang sangat diperlukan untuk pembangun WEB.

Penyampaian paparan adalah seperti berikut:

Lihat demo Muat turun kod sumber

HTML

Mula-mula muatkan fail CSS dan js yang diperlukan.

<link rel="stylesheet" href="css/photoswipe.css"> 
<link rel="stylesheet" href="css/default-skin/default-skin.css"> 
<script src="js/photoswipe.min.js"></script> 
<script src="js/photoswipe-ui-default.min.js"></script> 
Salin selepas log masuk

Jangan risau tentang fail di atas, Moonlight telah dibungkus, anda hanya boleh memuat turun dan menggunakannya.

Seterusnya, sediakan bahagian HTML dalam badan. Kami menyediakan lakaran kecil gambar pada halaman Apabila lakaran kecil ini diklik, album besar yang sepadan akan muncul Kami sedia

Struktur HTML adalah seperti berikut:

<div id="photos"> 
 <img src="images/s1_m.jpg" alt="Image description" /> 
 <p>图集</p> 
</div> 
Salin selepas log masuk

Kini, bahagian paparan galeri yang penting akan menyediakan struktur untuk paparan imej besar Ambil perhatian bahawa elemen dalam kod berikut: .pswp__bg, .pswp__scroll-wrap, .pswp__container dan .pswp__item tidak boleh diubah.

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 <div class="pswp__bg"></div> 
 <div class="pswp__scroll-wrap"> 
  <div class="pswp__container"> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
  </div> 
  <div class="pswp__ui pswp__ui--hidden"> 
   <div class="pswp__top-bar"> 
    <div class="pswp__counter"></div> 
    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 
    <button class="pswp__button pswp__button--share" title="Share"></button> 
    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> 
    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> 
    <div class="pswp__preloader"> 
     <div class="pswp__preloader__icn"> 
      <div class="pswp__preloader__cut"> 
      <div class="pswp__preloader__donut"></div> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> 
    <div class="pswp__share-tooltip"></div> 
   </div> 
   <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"> 
   </button> 
   <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"> 
   </button> 
   <div class="pswp__caption"> 
    <div class="pswp__caption__center"></div> 
   </div> 
   </div> 
  </div> 
</div> 
Salin selepas log masuk

Struktur HTML di atas mentakrifkan kandungan, alatan, butang arah, penerangan tajuk dan elemen lain yang dipaparkan dalam galeri.

Javascript

Kami mentakrifkan koleksi gambar album dalam js (sudah tentu, kami juga boleh menentukan koleksi gambar dalam bahagian html seperti demo2), menetapkan pelbagai pilihan, dan kemudian memanggil pemalam photoSwipe dengan menggunakan PhotoSwipe() baharu.

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 
  } 
 ]; 
 var options = { 
  history: false, 
  focus: false, 
  showAnimationDuration: 0, 
  hideAnimationDuration: 0 
 }; 
 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); 
 gallery.init(); 
}; 


//点击图集元素时触发调用openPhotoSwipe 

document.getElementById('photos').onclick = openPhotoSwipe; 
Salin selepas log masuk

Anda boleh menggunakan pemalam ini pada projek mudah alih Untuk lebih banyak tetapan pilihan, sila rujuk alamat projek PhotoSwipe: <https://github.com/dimsemenov/photoswipe.

Kandungan di atas adalah semua kandungan pelaksanaan javascript untuk menyokong galeri peranti mudah alih saya harap anda menyukainya.

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan