转盘js+jq写法

最新推荐文章于 2024-09-03 10:30:59 发布
原创最新推荐文章于 2024-09-03 10:30:59 发布 · 425 阅读
CC 4.0 BY-SA版权
文章标签：
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转盘</title>

    <style type="text/css">
        body {
            text-align: center;
        }

        button {
            cursor: pointer;
        }

        .box {
            width: 500px;
            height: 500px;
            margin: 10px auto;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('./turnplate-bg.png');
            /*大转盘的背景图 */
            background-size: 100%;
            background-repeat: no-repeat;
            padding: 22px;
        }

        .wz_main {
            width: 800px;
            height: 800px;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            transition: all 5s cubic-bezier(0.46, 0.03, 0, 0.96);

        }

        .main {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 0px solid black;
            border-radius: 50%;


            overflow: hidden;
            position: relative;
            transition: all 5s cubic-bezier(0.46, 0.03, 0, 0.96);
        }

        .pointer {
            width: 50px;
            height: 50px;
            background: #dc2426;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9;
        }

        .pointer-bar {
            width: 60px;
            height: 25px;
            background: #dc2426;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, 50%) rotate(90deg);
        }

        .pointer-cursor {
            width: 25px;
            height: 25px;
            position: absolute;
            left: 50%;
            top: 160%;
            transform: translate(-50%, -50%) rotateZ(45deg);
            background: #dc2426;
        }

        .part {
            height: 100%;
            width: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform-origin: left center;

        }

        .wz_part {
            height: 100%;
            width: 50%;
            position: absolute;
            top: 0;
            left: 50%;
            transform-origin: left center;

        }

        .bg {
            width: 100%;
            height: 100%;
        }

        .wz_bg {
            width: 100%;
            height: 100%;
        }

        .title {
            transform: translate(0, -50%);
            transform-origin: left top;
            width: 100%;
            height: auto;
            text-align: center;
            font-size: 30px;
            color: #e53130;
            position: absolute;
            top: 50%;
            left: 30%;
            padding-left: 85px;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .wz_title {
            transform: translate(0, -50%);
            transform-origin: left top;
            width: 100%;
            height: auto;
            text-align: center;
            font-size: 30px;
            color: white;
            position: absolute;
            top: 50%;
            left: 14%;
            padding-left: 85px;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ren {
            transform: translate(0, -50%);
            transform-origin: left top;
            width: 100%;
            height: auto;
            text-align: center;
            font-size: 30px;
            background-color: black;
            position: absolute;
            top: 50%;
            left: 0;
            padding-left: 85px;
            box-sizing: border-box;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #fff;


        }

        .title img {
            transform: rotate(90deg);
            width: 50%;
        }

        .kaqi {
            transform: rotate(90deg);
            width: 50%;
        }

        .kaqi p {
            padding: 0;
            margin: 0;
        }

        .pk {
            font-size: 12px;
            font-weight: bolder;
        }

        .py {
            font-size: 16px;
        }

        .wz_name {
            transform: rotate(-90deg);
            color: #000;
        }

        .winner {
            font-size: 30px;
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="zhuti" style="position: relative;width: 800px;height: 800px;">
        <!-- 最外层玩家占位 -->
        <div class="wz_main">
            <div id="wz_temp" class="wz_part" style="display: none;">
                <div class="wz_bg"></div>
                <div class="wz_title"></div>
            </div>
        </div>

        <div class="box">
            <!-- 大转盘抽奖 -->
            <div class="main" ontransitionend="end()">
                <div id="temp" class="part" style="display: none;">
                    <div class="bg"></div>
                    <div class="title"></div>
                    <div class="ren"></div>
                </div>
            </div>
            <!-- 箭头 -->
            <div class="pointer">
                <div class="pointer-bar"></div>
                <div class="pointer-cursor"></div>
            </div>
        </div>
    </div>
    <button onclick="start()">开始</button>
    <div class="winner"></div>

    <script type="text/javascript">
        var rotate = 0;
        //奖品集合可动态增减
        var list = [
            { title: 1, name: "张三", img: "./4e7ba6fc53a8dff27854017eaf04dc347019e20a.png" },
            { title: 2, name: "李四", img: "./6c9631b50e6455db0bab213a24735d8ecff7f852.png" },
            { title: 3, name: "王五", img: "./8da458a374e69ce4c8c3861f3be143599806b2e0.png" },
            { title: 4, name: "朱六", img: "./6385037516cc30f98e290cd9797bcaa8b7c54612.png" },
            { title: 5, name: "毛七", img: "./7374ab4184d385501606e5f108561966b4b4ff7c.png" },
            { title: 6, name: "刘八", img: "./ff253ad12b7027818f0de3914f0faa83755cd6af.png" },
            { title: 7, name: "陈九", img: "./6c9631b50e6455db0bab213a24735d8ecff7f852.png" },
            { title: 8, name: "江十", img: "./8da458a374e69ce4c8c3861f3be143599806b2e0.png" },
        ]
        //转盘背景颜色
        var colors = ["#bcf9bf", "#fff4d6", "#fbc9c6", "#f3d5f8", "#e9ddfb", "#b9e0ff", "#b7f8f2", "#f7fdc0"]

        var perAngle = 360 / list.length;
        var main = document.querySelector('.main');
        var temp = document.querySelector('#temp');
        var wz_main = document.querySelector('.wz_main');
        var wz_temp = document.querySelector('#wz_temp');
        for (var i in list) {
            var item = list[i];
            var newNode = temp.cloneNode(true);
            newNode.style.display = 'block';
            newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
            newNode.querySelector('.bg').style.background = colors[i];
            if (list.length > 2) {
                var p = this.perAngle / 2; // 每份的角度两等分
                var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
                var x = (100 - d) / 2; // 每份对边实际百分比
                newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
            }
            newNode.querySelector('.title').innerHTML = `<div class="kaqi"><p class="pk">等待开启${item.title}</p><p class="py">祝你好运</p><div>`;
            main.appendChild(newNode);
            //--------------------外层用户占位-------------------------
            var wz_newNode = wz_temp.cloneNode(true);
            wz_newNode.style.display = 'block';
            wz_newNode.style.transform = 'rotateZ(' + (perAngle * i + perAngle / 2) + 'deg)';
            if (list.length > 2) {
                var p = this.perAngle / 2; // 每份的角度两等分
                var d = Math.tan(p * Math.PI / 180) * 100; // 对边的长度
                var x = (100 - d) / 2; // 每份对边实际百分比
                wz_newNode.style.clipPath = `polygon(0% 50%, 100% ${x}%, 100% ${100 - x}%)`;
            }
            wz_newNode.querySelector('.wz_title').innerHTML = `<div class="wz_name">${item.name}<div>`;
            wz_main.appendChild(wz_newNode);

        }
        //设置起始项的位置
        let startIndex = 3;
        main.style = `transform: rotate(${(180 - perAngle) / 2 + perAngle * (list.length + 1 - startIndex)}deg)`;
        wz_main.style = `transform: rotate(${(180 - perAngle) / 2 + perAngle * (list.length + 1 - startIndex)}deg)`;
        var box = document.querySelector('.box');
        var zhuti = document.querySelector('.zhuti');
        box.style.top = (zhuti.offsetWidth - box.offsetWidth) / 2;
        var isRunning = false;

        function start() {
            if (isRunning) {
                return;
            }
            isRunning = true;
            document.querySelector('.winner').innerHTML = '';
            rotate += 360 * 7; // 多转3圈
            let getPrizeIndex = 1 - 1; // 抽到的奖品的序号从1开始
            let rotates = rotate + (180 - perAngle) / 2 - perAngle * getPrizeIndex;;
            main.style.transform = 'rotateZ(' + rotates + 'deg)';
            //转盘缓慢停止时依次显示奖品图片
            var speed = 1;
            var timer = setInterval(function () {
                speed++
                for (let i = 0; i < list.length; i++) {
                    if ((300 - speed) - i * list.length * (10 - list.length % 10) == 0) {
                        console.log(list[i].name, i)
                        document.getElementsByClassName('title')[i + 1].innerHTML = `<img src="${list[i].img}" />`;
                        document.getElementsByClassName('title')[i + 1].style.left = 0;
                    }
                }
                if (speed > 500) {
                    clearInterval(timer)
                }
            }, 10);



        }

        function end() {
            isRunning = false;
        }


    </script>
</body>

</html>