[代码样式]仿QQ绿钻抽奖转盘

[代码样式]仿QQ绿钻抽奖转盘

简介

腾讯心悦会员的一个活动,抽奖转盘做的不错,同样,还是使用 jQuery旋转插件jqueryrotate 制作。由于 IE9 以下的版本 jqueryrotate 只支持 img 标签,所以这次换成了 img 标签,但只可以转动一次,因为已经改变了 DOM,原来的对象已经没有了。

制作方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.rotate.min.js"></script>

2、HTML

<div class="dowebok">
    <div class="rotary">
        <img class="hand" src="https://www.dowebok.com/images/z.png" alt="">
    </div>
    <div class="list">
        <strong>100%中奖</strong>
        <h4>中奖用户名单</h4>
        <ul>
            <li>
                <span>154**88</span> <span>获得1个月绿钻</span>
            </li>
            <li>
                <span>6161***034</span> <span>获得11个月绿钻</span>
            </li>
            <li>
                <span>2349***224</span> <span>获得1个月绿钻</span>
            </li>
            <li>
                <span>433***54</span> <span>获得2个月绿钻</span>
            </li>
            <li>
                <span>5154***234</span> <span>获得4个月绿钻</span>
            </li>
            <li>
                <span>3213***123</span> <span>获得2个月绿钻</span>
            </li>
            <li>
                <span>898****362</span> <span>获得9个月绿钻</span>
            </li>
        </ul>
    </div>
</div>

3、CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: "Microsoft Yahei";
    background-color: #15734b;
}
h1 {
    width: 900px;
    margin: 40px auto;
    font: 32px "Microsoft Yahei";
    text-align: center;
    color: #fff;
}
.dowebok {
    width: 894px;
    height: 563px;
    margin: 0 auto;
    background-image: url(images/s3_bg.png);
}
.rotary {
    position: relative;
    float: left;
    width: 504px;
    height: 504px;
    margin: 20px 0 0 20px;
    background-image: url(images/g.png);
}
.hand {
    position: absolute;
    left: 144px;
    top: 144px;
    width: 216px;
    height: 216px;
    cursor: pointer;
}
.list {
    float: right;
    width: 300px;
    padding-top: 44px;
}
.list strong {
    position: relative;
    left: -45px;
    display: block;
    height: 65px;
    line-height: 65px;
    font-size: 32px;
    color: #ffe63c;
}
.list h4 {
    height: 45px;
    margin: 30px 0 10px;
    line-height: 45px;
    font-size: 24px;
    color: #fff;
}
.list ul {
    line-height: 36px;
    list-style-type: none;
    font-size: 12px;
    color: #fff;
}
.list span {
    display: inline-block;
    width: 94px;
}

4、JavaScript

$(function(){
    var $hand = $('.hand');
    $hand.click(function(){
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        data = data[Math.floor(Math.random()*data.length)];
        switch(data){
            case 1:
                rotateFunc(1,16,'恭喜你抽中了1个月绿钻');
                break;
            case 2:
                rotateFunc(2,47,'恭喜你抽中了2个月绿钻');
                break;
            case 3:
                rotateFunc(3,76,'恭喜你抽中了3个月绿钻');
                break;
            case 4:
                rotateFunc(4,106,'恭喜你抽中了4个月绿钻');
                break;
            case 5:
                rotateFunc(5,135,'恭喜你抽中了5个月绿钻');
                break;
            case 6:
                rotateFunc(6,164,'恭喜你抽中了6个月绿钻');
                break;
            case 7:
                rotateFunc(7,193,'恭喜你抽中了7个月绿钻');
                break;
            case 8:
                rotateFunc(7,223,'恭喜你抽中了8个月绿钻');
                break;
            case 9:
                rotateFunc(7,252,'恭喜你抽中了9个月绿钻');
                break;
            case 10:
                rotateFunc(7,284,'恭喜你抽中了10个月绿钻');
                break;
            case 11:
                rotateFunc(7,314,'恭喜你抽中了11个月绿钻');
                break;
            case 12:
                rotateFunc(7,345,'恭喜你抽中了12个月绿钻');
                break;
        }
    });
    var rotateFunc = function(awards,angle,text){
        $hand.stopRotate();
        $hand.rotate({
            angle: 0,
            duration: 5000,
            animateTo: angle + 1440,
            callback: function(){
                alert(text);
            }
        });
    };
});
隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]制作响应式分层幻灯片

2020-8-24 10:16:50

脚本代码

[代码样式]Ideal Image Slider – 简单的纯JS幻灯片

2020-8-24 10:16:52

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索