原生js实现照片墙消失展现360度旋转功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "demo.css">

</head>
<body>
    <div class="wrapper">
        <div class="imgBox">
            <!-- <img src="./pic/1.jpg" alt=""> -->
        </div>
        <button class = "btn">点我呀</button>
    </div>
    <script src = demo.js></script>
    
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background: #7b7b7b;
}
.wrapper{
    width: 70%; 
    margin: 100px auto;
    border: 1px solid black;
    height: 800px;
    position: relative;
}
.imgBox{
    width: 1000px;
    height: 600px;
    border: 1px solid #fff;
    margin: 50px auto;
    perspective: 700px;
 

}
.imgBox img{
    width: 200px;
    height: 150px;
    /* 去掉空隙 */
 float: left;

}
.btn{
    width: 100px;
    height: 40px;
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-left: -50px;
    left: 50%;
    position: absolute;
    bottom: 20px;
    background-color: #ccc;
    /* outline: none; */

}

function init() {
    // 页面初始化
    addImg();
}
init();
// var len,img;
var img;
var flag = true;
function addImg() {
    // 插入图片 生成img标签 src属性  路径随机 
    var imgBox = document.getElementsByClassName('imgBox')[0];
    for (var i = 0; i < 20; i++) {
        // 随机数拿到0-9
        var num = Math.floor(Math.random() * 5);
        var src = './pic/' + num + '.jpg';
        // 生成img标签
        var dom = document.createElement('img');
        dom.setAttribute('src', src);
        // shengcheng dom
        imgBox.appendChild(dom);


    }
    bindEvent();

}
function bindEvent() {
    var btn = document.getElementsByClassName('btn')[0];
    img = document.getElementsByTagName('img');
    var len = img.length;
    btn.addEventListener('click', function () {
        if (!flag) {
            return;
        }
        flag = false;
        var endNum = 0;
        // 绑定点击事件
        // 随机开始缩小，放大+透明度变零，所有图片执行完后转一圈飞回原来位置
        for (var i = 0; i < 20; i++) {
            // 立即执行函数解决闭包问题
            (function (i) {

                setTimeout(function () {
                    // 缩小成0
                    // img[i].style.transform = 'scale(0)';
                    // img[i].style.transition = '1s';
                    monition(img[i], '1s', function () {
                        // 此次动画要做的事情
                        this.style.transform = 'scale(0)';
                    }, function () {

                        // 动作执行完后立即要做的事情,第二步动画
                        monition(this, '1s', function () {
                            // 第二步动画
                            this.style.transform = 'scale(1)';
                            this.style.opacity = 0;


                        }, function () {
                            //     // 第二步动画结束
                            endNum++;
                            if (endNum == len) {
                                show();
                            }

                        });
                    });
                }, Math.random() * 1000);
            })(i);
        }

    });

}
function show() {
    // 第三步动画
    var endAll = 0;
    for (var i = 0; i < 20; i++) {
        img[i].style.transition = '';//过渡为空
        img[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';
        (
            function (i) {
                setTimeout(function () {
                    monition(img[i], '2s', function () {
                        this.style.opacity = 1;
                        img[i].style.transform = 'rotateY(-360deg) translateZ(0px)';

                    }, function () {
                        endAll++;
                        if (endAll == 50) {
                            flag = true;

                        }

                    });

                }, Math.random() * 1000);

            })(i);

    }

}
// 工具类函数,执行动画回调
function monition(dom, time, doFun, cb) {
    dom.style.transition = time;
    // 调用monition时拿到的this相当于dom
    doFun.call(dom);
    // 锁
    var call = true;
    // 监听动画结束时刻调用函数
    dom.addEventListener('transitionend', function () {
        if (call) {
            cb && cb.call(dom);
            call = false;
        }

    });

}

哪天才能学到vue

发布了60 篇原创文章 · 获赞 17 · 访问量 6429

私信关注

原生js实现照片墙消失展现360度旋转功能。

猜你喜欢