小程序中实现类似天猫抽奖的大转盘和跑马灯的效果

下面是页面的WXML代码：

 
  
    
    
      
        
      
    START  
    

下面是页面的WXSS代码：

/**index.wxss**/ 
   
.container-out {  
  height: 600rpx;  
  width: 650rpx;  
  background-color: #b136b9;  
  margin: 100rpx auto;  
  border-radius: 40rpx;  
  box-shadow: 0 10px 0 #871a8e;  
  position: relative;  
}  
   
.container-in {  
  width: 580rpx;  
  height: 530rpx;  
  background-color: #871a8e;  
  border-radius: 40rpx;  
  position: absolute;  
  left: 0;  
  right: 0;  
  top: 0;  
  bottom: 0;  
  margin: auto;  
}  
   
/**小圆球  
box-shadow: inset 3px 3px 3px #fff2af;*/ 
   
.circle {  
  position: absolute;  
  display: block;  
  border-radius: 50%;  
  height: 20rpx;  
  width: 20rpx;  
}  
   
.content-out {  
  position: absolute;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #f5f0fc;  
  border-radius: 15rpx;  
  box-shadow: 0 5px 0 #d87fde;  
}  
   
/**居中 加粗*/ 
   
.start-btn {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  border-radius: 15rpx;  
  height: 150rpx;  
  width: 166.6666rpx;  
  background-color: #ffe400;  
  box-shadow: 0 5px 0 #e7930a;  
  color: #f6251e;  
  text-align: center;  
  font-size: 55rpx;  
  font-weight: bolder;  
  line-height: 150rpx;  
}  
   
.award-image {  
  position: absolute;  
  margin: auto;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  height: 140rpx;  
  width: 130rpx;  
}

下面是页面的JS代码：

//index.js  
//获取应用实例  
var app = getApp()  
Page({  
  data: {  
    circleList: [],//圆点数组  
    awardList: [],//奖品数组  
    colorCircleFirst: &＃39;#FFDF2F&＃39;,//圆点颜色1  
    colorCircleSecond: &＃39;#FE4D32&＃39;,//圆点颜色2  
    colorAwardDefault: &＃39;#F5F0FC&＃39;,//奖品默认颜色  
    colorAwardSelect: &＃39;#ffe400&＃39;,//奖品选中颜色  
    indexSelect: 0,//被选中的奖品index  
    isRunning: false,//是否正在抽奖  
    imageAward: [  
      &＃39;../../images/1.jpg&＃39;,  
      &＃39;../../images/2.jpg&＃39;,  
      &＃39;../../images/3.jpg&＃39;,  
      &＃39;../../images/4.jpg&＃39;,  
      &＃39;../../images/5.jpg&＃39;,  
      &＃39;../../images/6.jpg&＃39;,  
      &＃39;../../images/7.jpg&＃39;,  
      &＃39;../../images/8.jpg&＃39;,  
    ],//奖品图片数组  
  },  
   
  onLoad: function () {

更多小程序中实现类似天猫抽奖的大转盘和跑马灯的效果相关文章请关注PHP中文网！