幸运大转盘H5,前端源码,你值得拥有!

作者: 极客小寨 | 来源:发表于2020-04-19 10:48 被阅读0次

幸运大转盘H5,前端源码,你值得拥有!
PHP+Ajax幸运大转盘抽奖源码
vue源码分析之响应式原理(Watcher、Observer、D
我值得
我敞开自己迎接一切的美好和幸运
请问你是H5开发的么？
微信小程序幸运大转盘制作教程
幸运大转盘
幸运大转盘
幸运大转盘

大家好，我是独立开发者陈东东，如今在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 中尝试这些效果。