浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2016-12-29

人气2904

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的移动手机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);
};                  
                

最后监听mousedowntouchstart事件,并对非.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();
    });
});                  
                

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:67.14KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2155.html 非特殊说明,本文版权归原作者所有,转载请注明出处
移动手机APP滑动手指切换图片特效

我当前G币余额:0 已下载次数:3

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)