多图片聚拢效果

作者: 云香水识 | 来源:发表于2016-06-14 15:25 被阅读106次

    参考效果: http://xuan.news.cn/zt/ouzhoubei.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>聚拢效果</title>
        <style>
            #container {
                width: 900px;
                height: 480px;
                margin: 40px auto;
                position: relative;
                overflow: visible;
            }
            #container img {
                visibility: hidden;
                position: absolute;
                left: 50%;
                top: 50%;
                width: 160px;
                margin: -50px 0 0 -80px;
                transition: all 2s ease;
            }
            p {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="container">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/33/wKhThldP4_AEAAAAAAAAAAAAAAA985.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M03/06/35/wKhTh1dP5r8EAAAAAAAAAAAAAAA195.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M05/04/DB/wKhThVdP65AEAAAAAAAAAAAAAAA306.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M01/06/D8/wKhThldQ02IEAAAAAAAAAAAAAAA032.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic001/M02/29/89/wKhTg1dQ21MEAAAAAAAAAAAAAAA496.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2GwEAAAAAAAAAAAAAAA281.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M04/06/DD/wKhTh1dQ2I4EAAAAAAAAAAAAAAA955.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic003/M07/06/DD/wKhTh1dQ2JwEAAAAAAAAAAAAAAA723.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M07/05/80/wKhThFdQ2tIEAAAAAAAAAAAAAAA659.jpg" alt="">
            < img src="http://tpic.home.news.cn/xhCloudNewsPic/xhpic002/M09/04/E5/wKhThFdP8m0EAAAAAAAAAAAAAAA547.jpg" alt="">
        </div>
        
        <p>图片和效果参考均来自 <a href="http://xuan.news.cn/zt/ouzhoubei.html">http://xuan.news.cn/zt/ouzhoubei.html</a></p>
    
    <script>
        var container = document.getElementById('container');
        var images = container.children;
    
    
        /**
         * 每日一题: 书写随机算法,实现一个多图片聚拢的效果
         */
    
        /**
         * 生成初始化位置,需要较为远离中心点
         * @return 返回位置和旋转角度
         */
        var randomBegin = function () {
            // TODO
            return {
                left: 0,
                top: 0,
                rotate: 90
            };
        };
    
        /**
         * 生成结束位置,需要较为靠近中心点
         * @return 返回位置和旋转角度
         */
        var randomEnd = function (begin) {
            // TODO
            return {
                left: 460,
                top: 250,
                rotate: 1234
            };
        };
    
        [].slice.call(images).forEach(function (img, i) {
            // 初始化随机位置
            var begin = randomBegin();
            img.style.left = begin.left + 'px';
            img.style.top = begin.top + 'px';
            img.style.transform = 'rotate(' + begin.rotate + 'deg)';
            img.style.visibility = 'visible';
            var end = randomEnd(begin);
            setTimeout(function () {
                img.style.left = end.left + 'px';
                img.style.top = end.top + 'px';
                img.style.transform = 'rotate(' + end.rotate + 'deg)';
            }, 100 + i * 2000);
        });
    
    
    </script>
    </body>
    </html>
    
    

    简单参考答案: http://runjs.cn/detail/dziuvuuk

    相关文章

      网友评论

        本文标题:多图片聚拢效果

        本文链接:https://www.haomeiwen.com/subject/poludttx.html