利用jQuery旋转插件jqueryrotate制作转盘抽奖

最新推荐文章于 2024-08-08 16:50:50 发布

置顶

最骚的就是你

最新推荐文章于 2024-08-08 16:50:50 发布

阅读量8.3k

点赞数

分类专栏： web前端学习文章标签： jquery 插件转盘抽奖 jqueryrota

本文链接：https://blog.csdn.net/libin_1/article/details/52198339

版权

这篇博客介绍了如何利用jQuery的旋转插件jqueryrotate来实现一个转盘抽奖的交互功能。提供了详细的原文链接和下载地址，同时也提到了如果在实现过程中需要使用ajax和date.json文件的情况。

摘要由CSDN通过智能技术生成

这里写图片描述

原文链接：http://www.cnblogs.com/bingwei/p/4830932.html

下载地址：http://download.csdn.net/detail/cometwo/9602323

<!DOCTYPE html>
<html>

    <head lang="en">
        <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>
        <link rel="stylesheet" href="css/index.css">
        <script src="js/jquery-2.1.4.js"></script>
        <script src="js/jQueryRotate.js"></script>
        <script src="js/index.js"></script>
    </head>

    <body>
        <div class="content">
            <div class="wheel">
                <canvas class="item" id="wheelCanvas" width="422px" height="422px"></canvas>
                <img class="pointer" src="images/wheel-pointer.png" />
            </div>
        </div>
        <div class="tips">
            <span id="tip">jason</span>
        </div>
    </body>

</html>

/*初始化样式*/

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
    margin: 0;
    padding: 0;
    border: 0;
}

ul,
ol {
    list-style-type: none;
}

select,
input,
img,
select {
    vertical-align: