APP telefon mudah alih jari gelongsor menukar gambar kesan khas dengan kod sumber download

Ini adalah APP telefon mudah alih yang sangat keren yang meluncurkan jari anda untuk menukar kesan gambar. Untuk kesan khas APP ini, pengguna boleh menukar gambar dengan meluncurkan jari mereka ke kiri dan kanan pada telefon mudah alih, dan kesan yang sama boleh dicapai dengan menggunakan tetikus pada peranti desktop.

Demonstrasi kesan Muat turun kod sumber

Cara menggunakan

Struktur HTML

Struktur HTML APP mudah alih ini untuk menukar kesan khas gambar menggunakan struktur HTML

bersarang setiap kad gambar dibalut dengan div.demo__card, yang mengandungi gambar, maklumat penerangan dan beberapa lapisan tambahan.

<div class="demo__card">
 <div class="demo__card__top brown">
 <div class="demo__card__img"></div>
 <p class="demo__card__name">Hungry cat</p>
 </div>
 <div class="demo__card__btm">
 <p class="demo__card__we">Whatever</p>
 </div>
 <div class="demo__card__choice m--reject"></div>
 <div class="demo__card__choice m--like"></div>
 <div class="demo__card__drag"></div>
</div>

Salin selepas log masuk

m--reject ialah lapisan apabila mengalihkan gambar ke kiri, m--like ialah lapisan apabila mengalihkan gambar ke kanan, demo__card__drag ialah lapisan seret.

JavaScript

Dalam kod jQuery, fungsi pullChange() digunakan untuk menetapkan sudut putaran dan ketelusan lapisan gelongsor kiri dan kanan. Fungsi release() digunakan untuk menentukan sama ada pengguna meluncurkan jarinya ke kiri atau kanan, dan menambah kelas yang sepadan dengan elemen DOM untuk tindakan ini.

function pullChange() {
 animating = true;
 deg = pullDeltaX / 10;
 $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
 var opacity = pullDeltaX / 100;
 var rejectOpacity = opacity >= 0 &#63; 0 : Math.abs(opacity);
 var likeOpacity = opacity <= 0 &#63; 0 : opacity;
 $cardReject.css('opacity', rejectOpacity);
 $cardLike.css('opacity', likeOpacity);
}
;
function release() {
 if (pullDeltaX >= decisionVal) {
  $card.addClass('to-right');
 } else if (pullDeltaX <= -decisionVal) {
  $card.addClass('to-left');
 }
 if (Math.abs(pullDeltaX) >= decisionVal) {
  $card.addClass('inactive');
  setTimeout(function () {
   $card.addClass('below').removeClass('inactive to-left to-right');
   cardsCounter++;
   if (cardsCounter === numOfCards) {
    cardsCounter = 0;
    $('.demo__card').removeClass('below');
   }
  }, 300);
 }
 if (Math.abs(pullDeltaX) < decisionVal) {
  $card.addClass('reset');
 }
 setTimeout(function () {
  $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
  pullDeltaX = 0;
  animating = false;
 }, 300);
};

Salin selepas log masuk

Akhir sekali, dengar acara turun tetikus dan mula sentuh, dan lakukan operasi penukaran kad pada elemen kad yang tidak aktif.

Cara menggunakan

Struktur HTML

Struktur HTML APP mudah alih ini untuk menukar kesan khas gambar menggunakan struktur HTML

bersarang setiap kad gambar dibalut dengan div.demo__card, yang mengandungi gambar, maklumat penerangan dan beberapa lapisan tambahan.

<div class="demo__card">
 <div class="demo__card__top brown">
 <div class="demo__card__img"></div>
 <p class="demo__card__name">Hungry cat</p>
 </div>
 <div class="demo__card__btm">
 <p class="demo__card__we">Whatever</p>
 </div>
 <div class="demo__card__choice m--reject"></div>
 <div class="demo__card__choice m--like"></div>
 <div class="demo__card__drag"></div>
</div>

Salin selepas log masuk

m--reject ialah lapisan apabila mengalihkan gambar ke kiri, m--like ialah lapisan apabila mengalihkan gambar ke kanan, demo__card__drag ialah lapisan seret.

JavaScript

Dalam kod jQuery, fungsi pullChange() digunakan untuk menetapkan sudut putaran dan ketelusan lapisan gelongsor kiri dan kanan. Fungsi release() digunakan untuk menentukan sama ada pengguna meluncurkan jarinya ke kiri atau kanan dan menambah kelas yang sepadan dengan elemen DOM untuk tindakan ini.

function pullChange() {
 animating = true;
 deg = pullDeltaX / 10;
 $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
 var opacity = pullDeltaX / 100;
 var rejectOpacity = opacity >= 0 &#63; 0 : Math.abs(opacity);
 var likeOpacity = opacity <= 0 &#63; 0 : opacity;
 $cardReject.css('opacity', rejectOpacity);
 $cardLike.css('opacity', likeOpacity);
}
;
function release() {
 if (pullDeltaX >= decisionVal) {
  $card.addClass('to-right');
 } else if (pullDeltaX <= -decisionVal) {
  $card.addClass('to-left');
 }
 if (Math.abs(pullDeltaX) >= decisionVal) {
  $card.addClass('inactive');
  setTimeout(function () {
   $card.addClass('below').removeClass('inactive to-left to-right');
   cardsCounter++;
   if (cardsCounter === numOfCards) {
    cardsCounter = 0;
    $('.demo__card').removeClass('below');
   }
  }, 300);
 }
 if (Math.abs(pullDeltaX) < decisionVal) {
  $card.addClass('reset');
 }
 setTimeout(function () {
  $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
  pullDeltaX = 0;
  animating = false;
 }, 300);
};

Salin selepas log masuk

Akhir sekali, dengar acara turun tetikus dan mula sentuh, dan lakukan operasi penukaran kad pada elemen kad yang tidak aktif.

$(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
 if (animating)
  return;
 $card = $(this);
 $cardReject = $('.demo__card__choice.m--reject', $card);
 $cardLike = $('.demo__card__choice.m--like', $card);
 var startX = e.pageX || e.originalEvent.touches[0].pageX;
 $(document).on('mousemove touchmove', function (e) {
  var x = e.pageX || e.originalEvent.touches[0].pageX;
  pullDeltaX = x - startX;
  if (!pullDeltaX)
   return;
  pullChange();
 });
 $(document).on('mouseup touchend', function () {
  $(document).off('mousemove touchmove mouseup touchend');
  if (!pullDeltaX)
   return;
  release();
 });
});

Salin selepas log masuk

Label berkaitan：

jquery手指滑动特效手指滑动特效

Artikel sebelumnya：Ringkasan contoh penggunaan eval dan dalam kemahiran javascript_javascript Artikel seterusnya：Pelajari pemalam jQuery EasyUI EasyUI dengan mudah untuk melaksanakan produk seret dan lepas dan letakkannya dalam troli beli-belah_jquery

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

Artikel terbaru oleh pengarang