图片/图形

移动手机APP滑动手指切换图片特效

阿里云


这是一款效果非常炫酷的移动手机 APP 滑动手指切换图片特效。该 APP 特效在移动手机中用户可以通过手指的左右滑动来切换图片,在桌面设备中通过鼠标也可达到同样的效果。

HTML 结构

这个移动手机 APP 切换图片特效的 HTML 结构采用嵌套<div>的 HTML 结构,每一张图片卡片都包裹在 div.demo__card 中,里面放置了图片,描述信息和一些额外的图层。

也想出现在这里?联系我们
创客主机
  1. <div class="demo__card">
  2.   <div class="demo__card__top brown">
  3.     <div class="demo__card__img"></div>
  4.     <p class="demo__card__name">Hungry cat</p>
  5.   </div>
  6.   <div class="demo__card__btm">
  7.     <p class="demo__card__we">Whatever</p>
  8.   </div>
  9.   <div class="demo__card__choice m--reject"></div>
  10.   <div class="demo__card__choice m--like"></div>
  11.   <div class="demo__card__drag"></div>
  12. </div>

m--reject 是向左移动图片时的图层,m--like 是向右移动图片时的图层,demo__card__drag 是拖动层。

JavaScript

在 jQuery 代码中,pullChange()函数用于设置向左和向右两个滑动层的旋转角度和透明度。release()函数用于判断用户是向左还是向右滑动手指,并为这些动作在 DOM 元素上添加相应的 class。

  1. function pullChange() {
  2.     animating = true;
  3.     deg = pullDeltaX / 10;
  4.     $card.css('transform', 'translateX(' + pullDeltaX + 'px) rotate(' + deg + 'deg)');
  5.     var opacity = pullDeltaX / 100;
  6.     var rejectOpacity = opacity >= 0 ? 0 : Math.abs(opacity);
  7.     var likeOpacity = opacity <= 0 ? 0 : opacity;
  8.     $cardReject.css('opacity', rejectOpacity);
  9.     $cardLike.css('opacity', likeOpacity);
  10. }
  11. ;
  12. function release() {
  13.     if (pullDeltaX >= decisionVal) {
  14.         $card.addClass('to-right');
  15.     } else if (pullDeltaX <= -decisionVal) {
  16.         $card.addClass('to-left');
  17.     }
  18.     if (Math.abs(pullDeltaX) >= decisionVal) {
  19.         $card.addClass('inactive');
  20.         setTimeout(function () {
  21.             $card.addClass('below').removeClass('inactive to-left to-right');
  22.             cardsCounter++;
  23.             if (cardsCounter === numOfCards) {
  24.                 cardsCounter = 0;
  25.                 $('.demo__card').removeClass('below');
  26.             }
  27.         }, 300);
  28.     }
  29.     if (Math.abs(pullDeltaX) < decisionVal) {
  30.         $card.addClass('reset');
  31.     }
  32.     setTimeout(function () {
  33.         $card.attr('style', '').removeClass('reset').find('.demo__card__choice').attr('style', '');
  34.         pullDeltaX = 0;
  35.         animating = false;
  36.     }, 300);
  37. };

最后监听 mousedown 和 touchstart 事件,并对非.inactive 的卡片元素执行卡片切换操作。

  1. $(document).on('mousedown touchstart', '.demo__card:not(.inactive)', function (e) {
  2.     if (animating)
  3.         return;
  4.     $card = $(this);
  5.     $cardReject = $('.demo__card__choice.m--reject', $card);
  6.     $cardLike = $('.demo__card__choice.m--like', $card);
  7.     var startX = e.pageX || e.originalEvent.touches[0].pageX;
  8.     $(document).on('mousemove touchmove', function (e) {
  9.         var x = e.pageX || e.originalEvent.touches[0].pageX;
  10.         pullDeltaX = x - startX;
  11.         if (!pullDeltaX)
  12.             return;
  13.         pullChange();
  14.     });
  15.     $(document).on('mouseup touchend', function () {
  16.         $(document).off('mousemove touchmove mouseup touchend');
  17.         if (!pullDeltaX)
  18.             return;
  19.         release();
  20.     });
  21. });

移动手机 APP 滑动手指切换图片特效

已有 732 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!