jquery实现转盘抽奖功能

现在我来向你讲解"jquery实现转盘抽奖功能"的具体实现步骤，你可以按照下面的流程来操作。

1. 引入JQuery库

首先在HTML中引入JQuery库，以便调用其方法。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 编写HTML结构

定义一个转盘的HTML结构，具体可以按照自己的需求来设计样式和内容。

<div class="turntable">
    <div class="turntable-bg"></div>
    <div class="turntable-pointer"></div>
    <ul class="turntable-list">
        <li>
            <span>1</span>
        </li>
        <li>
            <span>2</span>
        </li>
        <li>
            <span>3</span>
        </li>
        <li>
            <span>4</span>
        </li>
        <li>
            <span>5</span>
        </li>
        <li>
            <span>6</span>
        </li>
    </ul>
</div>

3. CSS样式设计

为转盘设置样式，包括背景、指针、列表等样式。

.turntable {
    position: relative;
    width: 350px;
    height: 350px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
}

.turntable-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg.jpg');
    background-size: 100% 100%;
}

.turntable-pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 75%;
    background-image: url('pointer.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    transform-origin: left center;
    transform: rotate(0deg);
    transition: transform 6s ease-out;
}

.turntable-list {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    height: 75%;
    margin: -37.5% 0 0 -37.5%;
    list-style: none;
    transform-origin: center center;
}

.turntable-list li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,.7);
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 100;
    pointer-events: none;
}

.turntable-list li span {
    font-size: 48px;
}

4. JS代码实现转盘旋转抽奖

在JS代码中，我们需要设置一个很大的数组，来模拟每个奖品所对应的位置和概率，并且需要基于该数组计算每个奖品所对应的角度。然后定义一个变量来储存旋转角度，并基于该变量能达到的最终角度来设置旋转动画。

$(function(){
    var $pointer = $('.turntable-pointer');
    var $turntable = $('.turntable');
    var $tickets = [0,1,2,3,4,5];
    var $angles = [
        {
            angle: [0, 45],
            text: '奖品1',
            color: '#fe6863'
        },
        {
            angle: [315, 360],
            text: '奖品2',
            color: '#86c1fd'
        },
        {
            angle: [225, 270],
            text: '奖品3',
            color: '#fcb047'
        },
        {
            angle: [135, 180],
            text: '奖品4',
            color: '#fe6863'
        },
        {
            angle: [270, 315],
            text: '奖品5',
            color: '#ff9c43'
        },
        {
            angle: [45, 90],
            text: '奖品6',
            color: '#86c1fd'
        },
    ];
    var $isRotating = false;
    var $result = 1;
    $pointer.click(function(){
        if($isRotating){
            return;
        }else{
            $isRotating = true;
            var $speed = Math.floor(Math.random()*3 + 2)*1000;
            $result = Math.floor(Math.random() * $tickets.length);
            var $angle = 360 / ($tickets.length) * $result;
            $angle += 360 * 6;
            $pointer.css({
                'transform': 'rotate(' + $angle + 'deg)',
                'transition': 'transform ' + $speed + 'ms cubic-bezier(.68,-0.55,.27,1.55)'
            });
            setTimeout(function(){
                alert('恭喜你抽中：' + $angles[$result].text);
                $isRotating = false;
            },$speed);
        }
    });
});

示例说明

示例一

我们假设现在有一个转盘，其中包含了六个选项，我们使用JS来随机生成这些选项的概率，并在点击时转动转盘。下面是代码演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现转盘抽奖</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .turntable {
            position: relative;
            width: 350px;
            height: 350px;
            margin: 0 auto;
            border-radius: 50%;
            overflow: hidden;
        }

        .turntable-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('bg.jpg');
            background-size: 100% 100%;
        }

        .turntable-pointer {
            position: absolute;
            top: 0;
            left: 0;
            width: 75%;
            height: 75%;
            background-image: url('pointer.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            transform-origin: left center;
            transform: rotate(0deg);
            transition: transform 6s ease-out;
        }

        .turntable-list {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 75%;
            height: 75%;
            margin: -37.5% 0 0 -37.5%;
            list-style: none;
            transform-origin: center center;
        }

        .turntable-list li {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: rgba(0,0,0,.7);
            transform-origin: center center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            z-index: 100;
            pointer-events: none;
        }

        .turntable-list li span {
            font-size: 48px;
        }
    </style>
</head>
<body>
<div class="turntable">
    <div class="turntable-bg"></div>
    <div class="turntable-pointer"></div>
    <ul class="turntable-list">
        <li>
            <span>1</span>
        </li>
        <li>
            <span>2</span>
        </li>
        <li>
            <span>3</span>
        </li>
        <li>
            <span>4</span>
        </li>
        <li>
            <span>5</span>
        </li>
        <li>
            <span>6</span>
        </li>
    </ul>
</div>
<script>
    $(function(){
        var $pointer = $('.turntable-pointer');
        var $turntable = $('.turntable');
        var $tickets = [0,1,2,3,4,5];
        var $angles = [
            {
                angle: [0, 45],
                text: '奖品1',
                color: '#fe6863'
            },
            {
                angle: [315, 360],
                text: '奖品2',
                color: '#86c1fd'
            },
            {
                angle: [225, 270],
                text: '奖品3',
                color: '#fcb047'
            },
            {
                angle: [135, 180],
                text: '奖品4',
                color: '#fe6863'
            },
            {
                angle: [270, 315],
                text: '奖品5',
                color: '#ff9c43'
            },
            {
                angle: [45, 90],
                text: '奖品6',
                color: '#86c1fd'
            },
        ];
        var $isRotating = false;
        var $result = 1;
        $pointer.click(function(){
            if($isRotating){
                return;
            }else{
                $isRotating = true;
                var $speed = Math.floor(Math.random()*3 + 2)*1000;
                $result = Math.floor(Math.random() * $tickets.length);
                var $angle = 360 / ($tickets.length) * $result;
                $angle += 360 * 6;
                $pointer.css({
                    'transform': 'rotate(' + $angle + 'deg)',
                    'transition': 'transform ' + $speed + 'ms cubic-bezier(.68,-0.55,.27,1.55)'
                });
                setTimeout(function(){
                    alert('恭喜你抽中：' + $angles[$result].text);
                    $isRotating = false;
                },$speed);
            }
        });
    });
</script>
</body>
</html>

示例二

我们将上述函数封装成jQuery插件形式，并添加了一些配置项供自定义调用，如指针样式、转盘样式、转盘上文字等。下面是代码演示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery转盘抽奖插件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
    (function($){
        $.fn.turntable=function(option){
            var opts = $.extend({}, $.fn.turntable.defaults, option);
            var $pointer = $(this).find('.turntable-pointer');
            var $turntable = $(this).find('.turntable');
            var $tickets = Array.apply(null, {length: opts.items}).map(Number.call, Number);
            var $angles = opts.angles;
            var $isRotating = false;
            var $result = 1;
            $pointer.css({
                'background-image': 'url(' + opts.pointer + ')'
            })
            $turntable.css({
                'background-image': 'url(' + opts.background + ')'
            });
            $(this).find('.turntable-list li span').each(function(index, element){
                $(this).html(opts.text[index]);
                $(this).css({
                    'color': opts.textColor,
                    'font-size': opts.fontSize
                });
                $(this).parent().css({
                    'background-color': opts.itemBgcolor
                });
            });
            $pointer.click(function(){
                if($isRotating){
                    return;
                }else{
                    $isRotating = true;
                    var $speed = Math.floor(Math.random()*3 + 2)*1000;
                    $result = Math.floor(Math.random() * $tickets.length);
                    var $angle = 360 / ($tickets.length) * $result;
                    $angle += 360 * opts.rounds;
                    $pointer.css({
                        'transform': 'rotate(' + $angle + 'deg)',
                        'transition': 'transform ' + $speed + 'ms cubic-bezier(.68,-0.55,.27,1.55)'
                    });
                    setTimeout(function(){
                        opts.callback($angles[$result].text);
                        $isRotating = false;
                    },$speed);
                }
            });
            return this;
        };
        $.fn.turntable.defaults={
            items: 6, // 转盘的物品数目
            text: ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'], // 每个盘块对应的文字
            rounds: 5, // 转盘旋转的圈数
            pointer: 'pointer.png', // 指针图片路径
            background: 'background.jpg', // 转盘背景图片路径
            angles: [
                {
                    angle: [0, 45], // 每个盘块对应的角度范围
                    text: '奖品1',
                    color: '#fe6863'
                },
                {
                    angle: [315, 360],
                    text: '奖品2',
                    color: '#86c1fd'
                },
                {
                    angle: [225, 270],
                    text: '奖品3',
                    color: '#fcb047'
                },
                {
                    angle: [135, 180],
                    text: '奖品4',
                    color: '#fe6863'
                },
                {
                    angle: [270, 315],
                    text: '奖品5',
                    color: '#ff9c43'
                },
                {
                    angle: [45, 90],
                    text: '奖品6',
                    color: '#86c1fd'
                },
            ],
            fontSize: '48px', // 每个盘块文字的大小
            textColor: '#fff', // 每个盘块文字的颜色
            itemBgcolor: 'rgba(0,0,0,.7)', // 每个盘块的背景颜色
            callback: function(){ alert('恭喜你抽中了!'); } // 抽奖结束后的回调函数
        };

    })(jQuery);

    $(function(){
        $('.turntable').turntable({
            items: 8,
            text: ['50000元', '10000元', '5000元', '1000元', '500元', '100元', '50元', '谢谢参与'],
            rounds: 8,
            pointer: 'https://cdn.bootcdn.net/ajax/libs/jquery-circle-progress/1.2.2/img/circle-progress-back.png',
            background: 'https://cdn.bootcdn.net/ajax/libs/jquery-circle-progress/1.2.2/img/circle-progress-back.png',
            callback: function(text){
                alert('恭喜你抽中了:' + text);
            }
        });
    });
</script>
</body>
</html>

以上就是使用jQuery实现转盘抽奖功能的全部攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现转盘抽奖功能 - Python技术站