Effets spéciaux d'image de commutation coulissante de doigt d'application de téléphone portable avec le code source download

Il s'agit d'une application pour téléphone mobile très cool qui fait glisser votre doigt pour changer d'effet d'image. Pour cet effet spécial APP, les utilisateurs peuvent changer d'image en faisant glisser leurs doigts vers la gauche et la droite sur les téléphones mobiles, et le même effet peut être obtenu en utilisant la souris sur les appareils de bureau.

Démonstration d'effet Téléchargement du code source

Comment utiliser

Structure HTML

La structure HTML de cette application mobile pour changer d'effets spéciaux d'image adopte la structure HTML de

imbriquée. Chaque carte image est enveloppée dans div.demo__card, qui contient l'image, les informations de description et quelques couches supplémentaires.

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

Copier après la connexion

m--reject est le calque lorsque vous déplacez l'image vers la gauche, m--like est le calque lorsque vous déplacez l'image vers la droite, demo__card__drag est le calque de déplacement.

JavaScript

Dans le code jQuery, la fonction pullChange() est utilisée pour définir l'angle de rotation et la transparence des calques coulissants gauche et droit. La fonction release() est utilisée pour déterminer si l'utilisateur fait glisser son doigt vers la gauche ou la droite, et ajoute les classes correspondantes aux éléments DOM pour ces actions.

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

Copier après la connexion

Enfin, écoutez les événements mousedown et touchstart et effectuez des opérations de changement de carte sur des éléments de carte non inactifs.

Comment utiliser

Structure HTML

La structure HTML de cette application mobile pour changer d'effets spéciaux d'image adopte la structure HTML de

imbriquée. Chaque carte image est enveloppée dans div.demo__card, qui contient l'image, les informations de description et quelques couches supplémentaires.

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

Copier après la connexion

m--reject est le calque lorsque vous déplacez l'image vers la gauche, m--like est le calque lorsque vous déplacez l'image vers la droite, demo__card__drag est le calque de déplacement.

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

Copier après la connexion

Enfin, écoutez les événements mousedown et touchstart et effectuez des opérations de changement de carte sur des éléments de carte non inactifs.

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

Copier après la connexion

Étiquettes associées：

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

source：php.cn

Article précédent：Résumé des exemples d'utilisation de eval et with in javascript_javascript skills Article suivant：Apprenez facilement le plug-in jQuery EasyUI EasyUI pour implémenter des produits par glisser-déposer et les placer dans le panier_jquery

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur