转盘的抽奖特效

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <title></title>
<style>

*{
    margin: 0;
    padding: 0;
}
ul{
    /*background: url(../img/bg-lottery.png) no-repeat;
    background-size: 100% 100%;*/
    font-size: 0.15rem;
    border-radius: 100%;
    display: flex;
    display: -webkit-flex;
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 0.35rem;
    position: relative;
    padding: 0.2rem;
    background: url(../img/ly-plate-c.gif) no-repeat;
    background-size: 100% 100%;
}
img{
    width: 2.8rem;
    height: 2.8rem;
}
li{
    list-style: none;
    display: none;
}
span{
    display: block;
    background: url(../img/playbtn.png) no-repeat;
    background-size: 100% 100%;
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    margin-top: 1.2rem;
    margin-left: 1.1rem;
}

</style>
    </head>
    <body>
        <ul class="zhuanpanfu">
            <li class="zhuanpanli">理财金2000元</li>
            <li class="zhuanpanli">谢谢参与</li>
            <li class="zhuanpanli">理财金5200元</li>
            <li class="zhuanpanli">京东の卡</li>
            <li class="zhuanpanli">谢谢参与</li>
            <li class="zhuanpanli">理财金1000元</li>
            <img src="img/bg-lottery.png"/>
        <span></span>
        </ul>
    </body>
    <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>

$(function(){
    var viewWidth = $(window).width();
    var viewWidth_10=viewWidth/100;
    document.documentElement.style.fontSize=document.documentElement.clientWidth/viewWidth_10+‘px‘;
    var j=0;
    $(‘span‘).click(function(){
        var i=1;
        j++;
        var timeflag= setInterval(function(){
            if(i<=800){
                i+=5;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)")
            }
            else if(i>800&i<=1300){
                i+=4;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)")
            }
            else if(i>1300&i<=1700){
                i+=3;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)")
            }
            else if(i>1700&i<=1900){
                i+=2;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)")
            }
            else if(i>1900&i<=2000){
                i+=1;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)");
            }
            else if(i>2000&i<=2100){
                i+=0.6;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)");
            }
            else if(i>2100&i<=2160){
                i+=0.4;
                $(‘img‘).css(‘transform‘,"rotate("+i+"deg)");
            }
            else{
                clearInterval(timeflag)
            }
        },1)
        
    })

})

</script>
</html>

时间： 2024-10-10 06:33:10

转盘的抽奖特效的相关文章

中奖概率算法（php 可用于刮刮卡，大转盘等抽奖算法）

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为:array(100,200,300,400), * 开始是从1,1000 这个概率范围内筛选第一个数是否在他的出现概率范围之内, * 如果不在,则将概率空间,也就是k的值减去刚刚的那个数字的概率空间, * 在本例当中就是减去100,也就是说第二个数是在1,900这个范围内筛选的. * 这样 筛选到最终,总

[jQuery编程挑战]002：实现一个转盘大抽奖

body { background-color: #F2F2F2; text-align: center; } .container { position: relative; width: 500px; height: 500px; margin: 0 auto; } .pic { position: absolute; width: 100px; height: 100px; border-radius: 50px; overflow: hidden; transition: width e

php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法

php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <!--?

js转盘大抽奖 自定义概率

公司项目搞优惠活动,让做一个转盘抽奖的活动,转盘抽奖让他转起来 按照概率停止其实都麻烦,但是概率如果设置在前端就会很大的安全漏洞,所以无论为了安全性还是后期的维护问题都要把概率写到后台配置里然后读取配置.那么问题来了,我们需要把后台的概率结果和前端自己的转盘想对应,我的大致思路是这样的,后台返回概率结果之后,对应的可定有奖品,然后给每个奖品一个不变的标识,根据这个返回的标识我们前端进行相应的转盘指针停留的位置.我们后台鼻尖懒 他不想改接口了 就直接让我去对应配置里的奖品名字,好吧就这样算是搞完了

Es6语法实现的转盘抽奖效果——可配置转盘的抽奖概率

最近公司要做一个转盘抽奖的效果,但是我们可以控制转盘抽奖的概率,自己用es6简单的实现了下,中间虽然遇到一些问题,但最终都是解决了,下面说一下我的思路. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/index.css">

jquery输入数字随机抽奖特效

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果展示 http://hovertree.com/texiao/jquery/76/ 效果图如下: 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery自定义数值抽奖活动代码 -

大转盘活动抽奖，需要demo留言

html+js <!DOCTYPE html><html><head> <meta http-equiv="content-type" content="text/html" charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-s

cocos2dx之抽奖界面与获奖概率的设计(一)

**************************************************************************** 时间:2015-02-01 作者:Sharing_Li 转载出处:http://blog.csdn.net/sharing_li/article/details/43268877 **************************************************************************** 在不同游戏中

paip.刮刮卡砸金蛋抽奖概率算法跟核心流程.

#---抽奖算法需要满足的需求如下: 1 #---抽奖核心流程 1 #---问题???更好的算法 2 #---实际使用的扩展抽奖算法(带奖品送完判断和每用户最大中奖判断) 2 #-------网上的抽奖算法Php 3 #----java版本的.. 4 参考 5 #---抽奖算法需要满足的需求如下: 1.可以控制中奖的概率 2.具有随机性 3.最好可以控制奖品的数量 4.根据用户ID或者ip.手机号.QQ号等条件限制抽奖次数 初期就这些需求,然后根据网上的资料,采用了一种阶段式抽取的方法,大家下面