移動手機APP滑動手指切換圖片特效

2024-04-27 15:02:53

字體：大中小

來源：轉載

供稿：網友

這是一款效果非常炫酷的移動手機APP滑動手指切換圖片特效。該APP特效在移動手機中用戶可以通過手指的左右滑動來切換圖片，在桌面設備中通過鼠標也可達到同樣的效果。

在線預覽源碼下載

使用方法

HTML結構

這個移動手機APP切換圖片特效的HTML結構采用嵌套<div>的HTML結構，每一張圖片卡片都包裹在div.demo__card中，里面放置了圖片，描述信息和一些額外的圖層。

<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是向左移動圖片時的圖層，m--like是向右移動圖片時的圖層，demo__card__drag是拖動層。

javaScript

在jQuery代碼中，pullChange()函數用于設置向左和向右兩個滑動層的旋轉角度和透明度。release()函數用于判斷用戶是向左還是向右滑動手指，并為這些動作在DOM元素上添加相應的class。

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

最后監聽mousedown和touchstart事件，并對非.inactive的卡片元素執行卡片切換操作。

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