Handy-APP-Finger-Schiebebild-Spezialeffekte mit Quellcode download_jquery

Dies ist eine sehr coole Handy-App, mit der Sie mit dem Finger zwischen Bildeffekten wechseln können. Für diesen APP-Spezialeffekt können Benutzer Bilder wechseln, indem sie auf Mobiltelefonen ihre Finger nach links und rechts bewegen, und der gleiche Effekt kann durch die Verwendung der Maus auf Desktop-Geräten erzielt werden.

Effektdemonstration     Quellcode-Download

Anwendung

HTML-Struktur

Die HTML-Struktur dieser mobilen APP zum Umschalten von Bildspezialeffekten übernimmt die HTML-Struktur von verschachtelten dc6dce4a544fdca2df29d5ac0ea9906b. Jede Bildkarte ist in div.demo__card eingeschlossen, die das Bild, Beschreibungsinformationen und einige zusätzliche Ebenen enthält.

<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 ist die Ebene, wenn das Bild nach links verschoben wird, m--like ist die Ebene, wenn das Bild nach rechts verschoben wird, demo__card__drag ist die Drag-Ebene.

JavaScript

Im jQuery-Code wird die Funktion pullChange() verwendet, um den Drehwinkel und die Transparenz der linken und rechten Schiebeebene festzulegen. Die Funktion release() wird verwendet, um zu bestimmen, ob der Benutzer seinen Finger nach links oder rechts bewegt, und fügt für diese Aktionen entsprechende Klassen zu den DOM-Elementen hinzu.

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

Abschließend hören Sie sich Mousedown- und Touchstart-Ereignisse an und führen Kartenwechselvorgänge für nicht inaktive Kartenelemente durch.

Anwendung

HTML-Struktur

Die HTML-Struktur dieser mobilen APP zum Wechseln von Bildspezialeffekten übernimmt die HTML-Struktur von verschachtelten dc6dce4a544fdca2df29d5ac0ea9906b. Jede Bildkarte ist in div.demo__card eingeschlossen, die das Bild, Beschreibungsinformationen und einige zusätzliche Ebenen enthält.

<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 ist die Ebene, wenn das Bild nach links verschoben wird, m--like ist die Ebene, wenn das Bild nach rechts verschoben wird, demo__card__drag ist die Drag-Ebene.

JavaScript

Im jQuery-Code wird die Funktion pullChange() verwendet, um den Drehwinkel und die Transparenz der linken und rechten Schiebeebene festzulegen. Die Funktion release() wird verwendet, um zu bestimmen, ob der Benutzer seinen Finger nach links oder rechts bewegt, und fügt für diese Aktionen entsprechende Klassen zu den DOM-Elementen hinzu.

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

Abschließend hören Sie sich Mousedown- und Touchstart-Ereignisse an und führen Kartenwechselvorgänge für nicht inaktive Kartenelemente durch.

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