问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

图片类似日历翻动效果动画？

头像
小样
    19074367

    类似以下效果的图片翻动，向下滑动是上一张，向上滑动是下一张：
    图片描述

    求解这个该怎么去做？

    javascripthtml5css
    阅读 2.8k
    1 个回答
    得票最新
    头像
    小样
      19074367
      ✓ 已被采纳
      <!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        .card {
            width: 200px;
        }
        
        .box {
            position: relative;
            perspective: 1000px;
        }
        
        .box .slide {
            width: 100%;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        .box .slide img {
            width: 100%;
            height: 100%;
        }
        
        .box .slide {
            opacity: 1;
            transform: translateY(0) rotateX(0);
            transition: all 1s ease-in-out 0s;
        }
        
        .box .slide.active {
            transform: translateY(-100%) rotateX(90deg);
            transform-origin: top bottom;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="container mt50">
            <div class="row">
                <div class="card">
                    <div class="box">
                        <!-- <div class="slide">
                            <img src="http://www.17sucai.com/preview/576956/2017-09-23/css3%E5%9B%BE%E7%89%87%E5%9E%82%E7%9B%B4%E6%97%8B%E8%BD%AC/img/1.jpg" alt="">
                        </div>
                        <div class="slide active">
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=48db07945dcd6c71e27f3bebeeb0e36d&src=http://pic1.nipic.com/2008-11-12/200811121148786_2.jpg" alt="">
                        </div> -->
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
<script>
    var imgArr = [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=f1295729d4ba529c8e2227ec1c980185&src=http://pic29.nipic.com/20130527/8786105_130215865000_2.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=5362861dc9a14f6995ee9407299f1289&src=http://img.juimg.com/tuku/yulantu/110322/8880-11032219110663.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1550213237&di=48db07945dcd6c71e27f3bebeeb0e36d&src=http://pic1.nipic.com/2008-11-12/200811121148786_2.jpg'
    ]
    var str = '';
    var index = imgArr.length - 1;
    for (let i = imgArr.length - 1; i >= 0; i--) {
        const element = imgArr[i];
        str += '<div class="slide">' + '<img src="' + element + '">' + '</div>'
    }
    $('.box').append(str);

    $(".box").on("touchstart", function(e) {　　　　
        e.preventDefault();　　　　
        console.log('touchstart')
        startX = e.originalEvent.changedTouches[0].pageX, 　　　
            startY = e.originalEvent.changedTouches[0].pageY;　　
    });　　
    $(".box").on("touchmove", function(e) {　　　　
        console.log('touchmove：')

    });
    $(".box").on("touchend", function(e) {　
        console.log('touchend')
        e.preventDefault();　　　　
        moveEndX = e.originalEvent.changedTouches[0].pageX, 　　　　
            moveEndY = e.originalEvent.changedTouches[0].pageY, 　　　　
            X = moveEndX - startX, 　　　　
            Y = moveEndY - startY;

        　　　　
        if (Math.abs(X) > Math.abs(Y) && X > 0) {　　　　　　
            console.log("左");　　　　
        }　　　　
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {　　　　　　
            console.log("右");　　　　
        }　　　　
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {　　　　　　
            console.log("下");　
            if (index < (imgArr.length - 1)) {
                console.log('index：' + index);
                index = index + 1;
                $('.box .slide').eq(index).removeClass('active');
            }
        }　　　　
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {　　　　　　
            console.log("上：" + index);　　

            if (index > 0) {
                $('.box .slide').eq(index).addClass('active');
                index = index - 1;

            }
        }　　　　
        else {　　　　　　
            console.log("just touch");　　　　
        }　　
    })
</script>

</html>

      已经解决，但是动画效果感觉还是有点生硬没有人家的那般，看是否有高手改进。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题