master

分支 (1)

管理

管理

master

doudizhu
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.js"></script>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<!--<div>-->
<!--    <button id="btn">open the iframe</button>-->
<!--    <div class="dialog-box">-->
<!--        <div class="dialog-content">-->
<!--            <iframe width="100%" name="iframe1"></iframe>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<div class="container" id="container">
<!--    <iframe src="swiper.html" name="implantIframe" height=""  frameborder="0"></iframe>-->
<!--    <button class="content"></button>-->
<!--    <a>555</a>-->
<!--    <div class="swiper-container">-->
<!--        <div class="swiper-box-2d">-->
<!--            <div class="content-b">1</div>-->
<!--            <div class="content-b">2</div>-->
<!--            <div class="content-b">3</div>-->
<!--            <div class="content-b">1</div>-->
<!--        </div>-->
<!--    </div>-->
            <div class="swiper-box-3d">
                <div class="content-a">1</div>
                <div class="content-a">2</div>
                <div class="content-a">3</div>
                <div class="content-a">4</div>
                <div class="content-a">5</div>
                <div class="content-a">6</div>
            </div>
<!--    <div class="swiper-box">-->
<!--        <div class="content-c">555</div>-->
<!--    </div>-->
</div>
<script type="text/javascript">
    function init1() {
        const _box = $(".swiper-box-3d");
        const _content = $(".content-a");
        var single = 360 / _content.length;
        const colors=['#dfe507','#ee3e3e','#2ac257','#5998ee','#d74108','#b90a44'];
        const backgrounds=['./public/images/001.jpg','./public/images/002.jpg','./public/images/003.jpg','./public/images/004.jpg','./public/images/005.jpg','./public/images/006.jpg'];
        for (let i = 0; i < _content.length; i++) {
            $(_content[i]).css({"transform":`rotateY(${single * i}deg) translateZ(300px)`,'background':`url(${backgrounds[i]})`})
        }
    }

    function init2() {
        const _box = $(".swiper-box-2d");
        const _content = $(".content-b");
        for (let i = 0; i < _content.length; i++) {
            $(_content[i]).css("transform",`translateX(-${300 * i}px)`)
        }
    }

    init1()
    $('[name=iframe1]').on('load', function () {
        var _height=$(this.contentWindow.document).find('body').clientHeight;
        this.height=_height;
    })

    $("#btn").off().on('click', function () {
        $(".dialog-box").show();
        $('[name=iframe1]').attr('src',"https://baidu.com");
    })
</script>
</body>
</html>