大家好，我是獨立開發(fā)者陳東東，如今在web項目中不少地方需要用到抽獎大轉(zhuǎn)盤營銷軟件，比如設(shè)置轉(zhuǎn)盤元素的背景色、邊框色等等，按照我們交互設(shè)計的期望-大轉(zhuǎn)盤最好簡單易用，僅顯示常用的那些色塊給用戶選擇，另外下一期會提供一個后臺方便用戶控制獎品概率等。
1539834480397699.jpg
關(guān)注公眾號直接關(guān)注回復(fù)關(guān)鍵字大轉(zhuǎn)盤前端,即可獲得源碼。
實現(xiàn)示例
示例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手機微信轉(zhuǎn)盤抽獎代碼 - 站長素材</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">
<!--轉(zhuǎn)盤效果開始-->
<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">當(dāng)前瀏覽器版本過低，請使用其他瀏覽器嘗試</canvas>
<img src="images/start.png" id="start" class="pointer">
<!-- <img id="tupBtn" class="pointer" src="img/turnplate-pointer_2.png"> -->
</div>
</div>
</div>
<!--轉(zhuǎn)盤效果結(jié)束-->
<div class="clear"></div>
</div>
<img class="bottom_shadow" src="img/bottom_shadow.png">
<img class="animated zoomIn kePublic_back" src="img/back1.png">
<!--------------滾動中獎紀(jì)錄---------------->
<div class="record_line" id="Marquee">
<div id="">
恭喜 159****3540 的用戶抽中 <span id="gift_coupon">200元現(xiàn)金代金券</span>
</div>
</div>
<!-------------底部聲明-------------->
<img class="rule_title" src="img/rule_title.png">
<div class="rule_text">
適用瀏覽器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。<br>
來源：<a 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">關(guān)閉</div>
</div>
</div>
<!-------------謝謝參與彈窗-------------->
<div class="xxcy-main" id="xxcy-main">
<div class="xxcy">
<div class="xxcy_text">
很遺憾<br>沒有抽中禮品
</div>
<div class="close_xxcy">關(guān)閉</div>
</div>
</div>
</body>
</html>
在這個實現(xiàn)中， 標(biāo)簽只是用作占位符，為了為效果美觀當(dāng)然少不了輔助的 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;}
/* 大轉(zhuǎn)盤樣式 */
.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%;}
實際使用時建議設(shè)置 width，height 和 alt 屬性值。
你也可以在 CodePen 中嘗試這些效果。
turntable.gif
「若你有原創(chuàng)文章想與大家分享，歡迎投稿」,關(guān)于P&P Team的那些事兒
更多分享，請持續(xù)關(guān)注“極客小寨工作室”第一時間關(guān)注程序猿（媛）身邊的故事
