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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwandte Etiketten：

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

Quelle：php.cn

Vorheriger Artikel：Zusammenfassung der Anwendungsbeispiele von eval und with in javascript_javascript skills Nächster Artikel：Erlernen Sie ganz einfach das jQuery-Plug-in EasyUI EasyUI, um Produkte per Drag-and-Drop zu implementieren und in den Warenkorb zu legen_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors