1. Python技术站首页
  2. jquery

jquery实现转盘抽奖功能

• 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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • jQWidgets jqxDropDownList closeDelay属性

    jQWidgets jqxDropDownList closeDelay属性详解 jQWidgets是一个基于jQuery的UI组件库，提供了丰富UI组件和工具包。jqxDropDownList是Widgets组件下的组件。本文将详细介绍jqxDropDownList的closeDelay`属性，包括用法、语法和示例。 closeDelay属性的基本语法 c…

    jquery 2023年5月10日
    00

  • 一篇文章带你入门和了解Jquery的基础操作

    一篇文章带你入门和了解jQuery的基础操作 jQuery是一款流行的JavaScript库，它可以使HTML文档操作更加简单、直观和高效，是Web开发中必不可少的工具之一，本篇文章将介绍jQuery的基础概念和常用操作。 引入jQuery 在使用jQuery之前，需要先引入它的库文件，可以通过CDN或本地引入，如： <!–引入jQuery的CDN-…

    jquery 2023年5月28日
    00

  • jQWidgets jqxGauge LinearGauge animationDuration属性

    jQWidgets jqxGauge LinearGauge animationDuration属性 jQWidgets是一个基于jQuery的UI组件库，提供了丰富的UI件和工具，包括表格、图、日历、菜单等。jqxauge和jqxLinearGauge是jQWidgets中的两个组件，用于显示仪表盘和线性仪表盘。这个组件都提供了animationDurat…

    jquery 2023年5月9日
    00

  • jQuery+php实现ajax文件即时上传的详解

    如何使用jQuery和PHP实现ajax文件即时上传？ 下面，我来给大家详细讲解一下这个问题的解决方案。需要注意的是，为了方便讲解，本篇示例中使用了jQuery的ajax方法，另外，上传文件会涉及到文件访问权限和安全问题，请务必做好相关设置。 步骤一：HTML页面制作 首先，我们需要制作一个HTML页面，用来在用户点击“上传文件”按钮时触发上传操作。以下是一…

    jquery 2023年5月27日
    00

  • jQWidgets jqxDraw attr() 方法

    以下是关于“jQWidgets jqxDraw attr() 方法”的完整攻略，包含两个示例说明： 简介 jqxDraw 控件的 attr() 方法用于获取或设置绘元素的属性。该方法可以用于设置绘图元素的位置、大小、颜色等属性。 完整攻略 下面是 jqx 控件 attr() 方法的完整攻略： 设置属性 var rect = draw.rect(100, 10…

    jquery 2023年5月10日
    00

  • jQWidgets的jqxScheduler渲染属性

    以下是关于 jQWidgets jqxScheduler 渲染属性的详细攻略。 jQWidgets jqxScheduler 渲染属性 jQWidgets jqxScheduler 是功能强大的日程表组件，它提供了多种渲染属性，可以帮助您自定义日程表的外观和行为。 渲染属性列表 以下 jQWidgets jqxScheduler 的渲染属性列表： appoi…

    jquery 2023年5月12日
    00

  • 动态加载jQuery的方法

    当我们在一个网站中需要使用jQuery时，最基本的做法是在HTML页面的<head>标签中引入jQuery的CDN链接或是下载jQuery到本地并引入。但是在一些情况下，我们需要在网站中进行动态加载jQuery，这时我们可以使用以下方法： 1. 使用jQuery.getScript()方法动态加载 jQuery中的.getScript()方法可以…

    jquery 2023年5月27日
    00

  • jQuery UI position()方法

    以下是关于 jQuery UI position() 方法的完整攻略： jQuery UI position() 方法 在 jQuery UI 中，可以使用 position() 方法将元素定位到指定的位置。position() 方法可以使用多种选项来指定元素的位置，例如 my、at、of、collision 等。 语法 $(selector).positi…

    jquery 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部