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

大家好，我是独立开发者陈东东，如今在web项目中不少地方需要用到抽奖大转盘营销软件，比如设置转盘元素的背景色、边框色等等，按照我们交互设计的期望-大转盘最好简单易用，仅显示常用的那些色块给用户选择，另外下一期会提供一个后台方便用户控制奖品概率等。

1539834480397699.jpg

关注公众号直接关注回复关键字大转盘前端,即可获得源码。

实现示例

示例HTML代码:

 
 
 
 

  
  

   

    

     
     当前浏览器版本过低，请使用其他浏览器尝试
     
     
    
   
  
  
  

 
 
 
 
 
 

  

   恭喜  159****3540  的用户抽中  200元现金代金券
  
 

 
 
 

  适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

  来源：极客小寨
 




  

   

    中奖啦
恭喜获得一份
可在我的券包中查看
   
   
关闭
  




 

  

   很遗憾
没有抽中礼品
  
   
  
关闭
 

在这个实现中， 标签只是用作占位符，为了为效果美观当然少不了辅助的 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的那些事儿

更多分享，请持续关注“极客小寨工作室”第一时间关注程序猿（媛）身边的故事