大家好，我是独立开发者陈东东，如今在web项目中不少地方需要用到抽奖大转盘营销软件，比如设置转盘元素的背景色、边框色等等，按照我们交互设计的期望-大转盘最好简单易用，仅显示常用的那些色块给用户选择，另外下一期会提供一个后台方便用户控制奖品概率等。
1539834480397699.jpg
关注公众号直接关注回复关键字大转盘前端,即可获得源码。
实现示例
示例HTML代码:
<!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>jQuery手机微信转盘抽奖代码 - 站长素材</title>
<link href="css/mui.min.css" rel="stylesheet">
<link href="css/award.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/turntable.js"></script>
</head>
<body>
<!-------------抽奖页面-------------->
<div class="ml-main" id="ml-main">
<img class="main_back" src="img/back.png">
<img class="animated zoomIn img_2_1" src="img/img_1.png">
<img class="animated bounceIn img_2_2" src="img/img_2.png">
<div class="kePublic">
<!--转盘效果开始-->
<div style="margin:0 auto">
<div class="banner">
<div class="turnplate">
<!-- <canvas class="item" id="wheelcanvas" width="516" height="516"></canvas> -->
<canvas class="item" id="myCanvas" width="520px" height="520px">当前浏览器版本过低，请使用其他浏览器尝试</canvas>
<img src="images/start.png" id="start" class="pointer">
<!-- <img id="tupBtn" class="pointer" src="img/turnplate-pointer_2.png"> -->
</div>
</div>
</div>
<!--转盘效果结束-->
<div class="clear"></div>
</div>
<img class="bottom_shadow" src="img/bottom_shadow.png">
<img class="animated zoomIn kePublic_back" src="img/back1.png">
<!--------------滚动中奖纪录---------------->
<div class="record_line" id="Marquee">
<div id="">
恭喜 159****3540 的用户抽中 <span id="gift_coupon">200元现金代金券</span>
</div>
</div>
<!-------------底部声明-------------->
<img class="rule_title" src="img/rule_title.png">
<div class="rule_text">
适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。<br>
来源：<a href="http://www.geekxz.com/" target="_blank">极客小寨</a>
</div>
</div>
<!-------------中奖弹窗页面-------------->
<div class="zj-main" id="zj-main">
<div class="txzl">
<div class="zj_text">
中奖啦<br>恭喜获得<span id="jiangpin"></span>一份<br>可在我的券包中查看
</div>
<div class="close_zj">关闭</div>
</div>
</div>
<!-------------谢谢参与弹窗-------------->
<div class="xxcy-main" id="xxcy-main">
<div class="xxcy">
<div class="xxcy_text">
很遗憾<br>没有抽中礼品
</div>
<div class="close_xxcy">关闭</div>
</div>
</div>
</body>
</html>
在这个实现中， 标签只是用作占位符，为了为效果美观当然少不了辅助的 CSS：
CSS 代码:
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{color:#333; font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
input{ font-size:12px;}
a{ text-decoration:none; color:#000;}
a:hover{color:#c00; text-decoration:none;}
.clear{clear:both;}
/* 大转盘样式 */
.banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;}
.banner .turnplate{display:block;width:100%;position:relative;}
.banner .turnplate canvas.item{width:100%;}
.banner .turnplate img.pointer{position:absolute;width:36%;height:40%;left:32%;top:28%;}
.more{display: block;width: 100%;position: fixed;top: 0;left: 0;height: 150px;}
.cloud{position: fixed;left: 0;top: 70%;width: 150px;}
.cloud2{position: fixed;right: 0;top: 32%;width: 50px;}
.cloud3{position: fixed;left: 0;top: 30%;width: 100px;}
@media screen and (max-width: 320px) {
.cloud{position: fixed;left: 0;top: 70%;width: 150px;}
.cloud2{position: fixed;right: 0;top: 30%;width: 50px;}
.cloud3{position: fixed;left: 0;top: 23%;width: 100px;}
}
@media screen and (min-width: 321px) and (max-width: 375px) {
.cloud{position: fixed;left: 0;top: 72%;width: 150px;}
.cloud2{position: fixed;right: 0;top: 32%;width: 50px;}
.cloud3{position: fixed;left: 0;top: 25%;width: 100px;}
}
@media screen and (min-width: 376px) {
.cloud{position: fixed;left: 0;top: 68%;width: 150px;}
.cloud2{position: fixed;right: 0;top: 32%;width: 50px;}
.cloud3{position: fixed;left: 0;top: 25%;width: 100px;}
}
@media screen and (max-height: 480px) {
.cloud{position: fixed;left: 0;top: 81%;width: 150px;}
.cloud2{position: fixed;right: 0;top: 35%;width: 50px;}
.cloud3{position: fixed;left: 0;top: 27%;width: 100px;}
}
#mark{width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;display: none;}
.red-img{position: fixed;top: 10%;left: 5%;width: 90%;}
实际使用时建议设置 width，height 和 alt 属性值。
你也可以在 CodePen 中尝试这些效果。
turntable.gif
「若你有原创文章想与大家分享，欢迎投稿」,关于P&P Team的那些事儿
更多分享，请持续关注“极客小寨工作室”第一时间关注程序猿（媛）身边的故事
