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

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 dc6dce4a544fdca2df29d5ac0ea9906b 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> 

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 ? 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);
}; 

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 dc6dce4a544fdca2df29d5ac0ea9906b 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> 

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 ? 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);
};

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();
 });
});