超好看的照片墙

Html

Css

#img {
	width:503px;
	height:252px;
	margin:50px auto;
	perspective:700px;
	-webkit-perspective:700px;
}
#img img {
	width:50px;
	height:50px;
	float:left;
}
#btn {
	width:100px;
	height:40px;
	line-height:40px;
	text-align:center;
	font-size:16px;
	color:#000;
	background:#0fc;
	border-radius:5px;
	margin:0 auto;
	padding:5px 5px;
	cursor:pointer;
}

/*
        1.闪的效果（瞬间高度宽度变为0，scale,随机）
        2.图片由小变大，同时透明度由1-0
        3.图片旋转，同时透明度由0-1
    */
window.onload = function() {
    var btn = document.getElementById('btn');
    var imgs = document.getElementsByTagName("img");
    var on = true;

btn.onclick = function() {
        if (!on) {
            return;
        }
        on = false;
        var endNum = 0; //运动完成的图片数量
        for (var i = 0; i < imgs.length; i++) {
            (function(i) {
                setTimeout(function() {
                    montion(imgs[i], '1s', function() {
                        this.style.transform = 'scale(0)';
                    }, function() {
                        montion(this, "1s", function() {
                            this.style.transform = 'scale(1)';
                            this.style.opacity = '0';
                        }, function() {
                            endNum++;
                            if (endNum == imgs.length) {
                                toBig();
                            }
                        })
                    })
                }, Math.random() * 1000);
            })(i)
        }

};

//第三个效果
    function toBig() {
        /*
            坐标轴（X，Y,z）
        */
        var allEnd = 0;
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].style.transition = "";
            imgs[i].style.transform = 'rotateY(0deg) translateZ(-' + Math.random() * 500 + 'px)';
            (function(i) {
                setTimeout(function() {
                    montion(imgs[i], '2s', function() {
                        this.style.opacity = 1;
                        this.style.transform = 'rotateY(-360deg) translateZ(0)';
                    }, function() {
                        allEnd++;
                        if (allEnd == imgs.length) {
                            on = true;
                        }
                    });
                }, Math.random() * 1000);
            })(i)
        }
    }

//运动函数（运动的对象，时间，属性函数，回调）
    function montion(obj, time, doFn, callBack) {
        obj.style.transition = time;
        doFn.call(obj); //调用函数，并把this的指向给obj
        var called = false
        obj.addEventListener('transitionend', function() {
            if (!called) {
                callBack && callBack.call(obj);
                called = true;
            }
        }, false);
    }
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

超好看的照片墙



代码描述：原生js+css3实现照片墙效果

该照片墙使用原生js和css3实现的，主要效果分为三个部分:
闪的效果（瞬间高度宽度变为0，scale,随机）。
图片由小变大，同时透明度由1-0。
图片旋转，同时透明度由0-1，根据Z轴旋转实现。

4

最新

发表评论全部评论

暂时没有评论！

日暮途远丶0

2018/6/14 19:19:22

照片替换后为什么没效果了

C-晖晖0

2018/7/13 10:50:18

不会呀

回复

Alice7060

2017/11/30 12:58:43

很6一点点代码完成这样的效果，给赞

C-晖晖0

2017/12/9 15:32:38

嘻嘻

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

C-晖晖

相关代码

超好看的照片墙

最新