“抽奖”的 Web 开发实现

最新推荐文章于 2024-10-06 11:06:14 发布

lvye1221

最新推荐文章于 2024-10-06 11:06:14 发布

阅读量3.3k

点赞数 2

分类专栏： Web 文章标签： web 图片

本文链接：https://blog.csdn.net/lvye1221/article/details/70158319

版权

Web 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

抽奖

抽奖功能的 Web 方式实现，如下图所示：
这里写图片描述

英文单词

lottery: 运气、彩票

开发步骤

HTML结构

大盒子里有背景图片和抽奖的指针。分别定义好样式名和id名

<div class="lottery-box">
    <div class="plate" id="plate"></div>
    <div class="hand" id="hand"></div>
</div>

样式修饰

让盒子重合在一起


/* 抽奖盘盒子 */
.lottery-box { 
    position: relative;
}

/* 抽奖盘转盘 */
.plate { 
    width: 500px; 
    height: 500px; 
    background: url(img/plate.png) no-repeat;

    /*设置图片的旋转中心位置*/
    transform-origin: 50% 50%;
    /*默认的旋转角度*/
    transform: rotate(0deg);    
}

/* 抽奖盘指针 */
.hand { 
    width: 500px; 
    height: 500px; 
    background:url(img/hand.png) no-repeat; 

    /*设置绝对定位，使得转盘和指针可以叠在一起*/
    position:absolute; 
    top: 0px; 
    left: 0px;
}

动画效果实现

引入 JQuery 库

<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

匀速旋转设置奖项的方式

设置成3等奖


// 获取奖牌和手型
var oPlate = $("#plate");
var oHand = $("#hand");

// 奖项设置
var prize = 8;

// 需要找到图片角度与奖项直接的关系
var degree = 360 - (prize - 1) * 45;

// 启动时的角度
var totalDegree = 0;

var deta = 10;

// 启动定时器，定时更新角度
var timer = setInterval(function () {

    // 每次增加一定的旋转角度
    totalDegree += deta;

    var str = "rotate(" +  totalDegree +"deg)";
    oPlate.css("transform", str);

    // 判断是否到达目标位置
    if (totalDegree >= degree) {

        //清除定时器
        clearInterval(timer);

        setTimeout(function() {
            alert('恭喜您中了' + prize + '等奖!');
        }, 300);
    }

}, 200);

缓冲运动来设置奖项

// 开始增加的角度
var deta = degree / 10;



// 定时器中变化的
// 变化量越来越小
deta = (degree - totalDegree) / 10;
// 避免后面增加的角度为0，从而进入死循环
if (deta < 1) {
    deta = 1;
}