Official
/
Front_End_CN


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/magic.min.css">
    <style>
        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
            backface-visibility: hidden; */

        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        html {
            font-size: 36px;
        }

        body {
            background-color: #292929;
        }
        ul{
            width: 100%;
            height: 100%;
            position: relative;
            left: -24px;
        }
        li {
            left: -9999px;
            position: absolute;
            cursor: pointer;
            list-style: none;
            background-image: -webkit-linear-gradient(top, #555a5f, #efeeed);
            background-image: -ms-linear-gradient(top, #555a5f, #efeeed);
            user-select: none;
            z-index: 5;
            text-align: center;

        }


        li img {
            transform: scale(0.5);
            pointer-events: none;
            vertical-align: middle;
            transition: all .4s ease-in;
        }

        li div {
            display: none;
            width: 100%;
            height: 100%;
        }

        li.focus {
            z-index: 10 !important;
        }

        li.focus img {
            transform: scale(1.2);
        }

        li.l-4 {
            opacity: 0.3;
            z-index: 1;
            transform: scale(0.4);
        }

        li.l-3 {
            opacity: 0.3;
            z-index: 2;
            transform: scale(0.6);
        }

        li.l-2 {
            opacity: 0.9;
            z-index: 3;
            transform: scale(0.8);
        }

        li.l-1 {
            opacity: 1;
            z-index: 4;
            transform: scale(0.9);
        }

        li:hover {
            opacity: 1;
            transform: scale(1.4);
            z-index: 20;
        }

        li.click {
            left: 50% !important;
            top: 50% !important;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            z-index: 30 !important;
            width: 500px !important;
            height: 460px !important;
            line-height: 260px !important;
            border: solid 2px #fff;
        }

        li.click div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            display: block;
        }

        li.click img {
           transform: scale(0);
        }

        .panel {
            display: none;
            position: fixed;
            padding: 10px;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100px;
            background-color: #efefef;
            border-top: solid 1px #ccc;
        }

        iframe {
            width: 100%;
            height: 100%;
        }

        .mobile ul {
            transform: scale(0.3) translate(-200%)
        }

        .mobile li img {
           transition: none;
        }

        .mobile li:hover {
            opacity: 1;
            transform: unset;
            z-index: 20;
        }

        .mobile li.bigger {
            left: 170% !important;
            top: 5rem !important;
            opacity: 1;
            z-index: 30 !important;
            border: solid 2px #fff;
            width: 15rem !important;
            height: 15rem !important;
            line-height: 15rem !important;
        }

        .mobile li.bigger img {
            width: 80%;
            height: 80%;
            transform: scale(1) !important;
        }
    </style>
</head>

<body>
    <ul></ul>
    <script src="js/detect.mobile.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/model-data.js"></script>
    <script>
        var list = ModelData;
        var html = [];
        if (IsMobile()) {
            list = list.slice(0, 55)
            $('body').addClass('mobile')
        }

        list.forEach(function (item, i) {
            var clazz = item.clazz || '';
            clazz += (item.focus ? ' focus' : '')
            html.push('<li data-index="' + i + '" data-url="' + item.url + '" class="' + clazz +
                '" style="line-height:' + item.height + 'px;top:' + (item.top / 36 || 0) + 'rem;left:' + (
                    item.left / 36 || 0) + 'rem;width:' + item.width / 36 + 'rem;height:' + item.height /
                36 + 'rem">');
            html.push('    <img src="photos/' + item.image_small +
                '">');
            html.push('    <div></div>')
            html.push('</li>');
        })
        $(html.join('')).appendTo('ul');

        $("li").css('value', 0).css('opacity', 0).each(function (i) {
            var time = Math.random() * 1000;
            $(this).delay(time).animate({
                value: 1
            }, {
                step: function (n) {
                    ry = (1 - n) * 360;
                    tz = (1 - n) * 1000;
                    $(this).css("transform", "rotateY(" + ry + "deg) translateZ(" + tz +
                        "px)").css('opacity', n);
                    if (n > .98) {
                        $(this).css("transform", "").css("opacity", "").css("transition",
                            "all .4s ease-in")
                    }

                },
                duration: 3000,
                //some easing fun. Comes from the jquery easing plugin.
                easing: 'easeOutQuint',
                done: function () {

                }
            })
        })

        if (IsMobile()) {
            // $('li').click(function (e) {
            //     $('li.click').removeClass('click')
            //     $(this).addClass('click');
            //     return false;
            // })
            $('ul').css({height:'auto',left:'auto'})
            $('li').on('touchstart', function () {
                $('li.bigger').removeClass('bigger')
                $(this).addClass('bigger');
                return false;
            })
            $(document).on('touchstart', function () {
                $('li.bigger').removeClass('bigger')
            })
        } else {
            $('ul').css({width:window.innerWidth+'px',margin:'0 auto'})
            $('li').click(function (e) {
                $('li.click').removeClass('click').find('iframe').remove();
                $(this).addClass('click');
                var $iframe = $('<iframe style="display:none" frameborder="0" src="' + $(this).data('url') +
                    '"></iframe>').appendTo($(this).find('div'));
                setTimeout(function () {
                    $iframe.css('display', 'block')
                }, 400);
                return false;
            })
            $(document).click(function () {
                $('li.click').removeClass('click').find('iframe').remove()
            })
        }
    </script>
</body>

</html>