基本实现功能
1，小程序仿天猫超市抽奖大转盘
2，跑马灯效果
3，开始抽奖，抽奖完成后有弹窗
先看效果图
简单说一下
1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;
2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.
自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.
实现源码，看注释应该能看懂，有问题欢迎批评！
&!--index.wxml--&
&view class=&container-out&&
class=&circle& wx:for=&{{circleList}}&
style=&top:{{item.topCircle}}left:{{item.leftCircle}}background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};&&&/view&
&view class=&container-in&&
&view class=&content-out& wx:for=&{{awardList}}& style=&top:{{item.topAward}}left:{{item.leftAward}}background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};&&
&image class=&award-image& src=&{{item.imageAward}}&&&/image&
&view class=&start-btn& bindtap=&startGame& style=& background-color:{{isRunning?'#e7930a':'#ffe400'}}&&START&/view&
/**index.wxss**/
.container-out {
height: 600
width: 650
background-color: #b136b9;
margin: 100
border-radius: 40
box-shadow: 0 10px 0 #871a8e;
.container-in {
width: 580
height: 530
background-color: #871a8e;
border-radius: 40
bottom: 0;
box-shadow: inset 3px 3px 3px #fff2*/
border-radius: 50%;
height: 20
.content-out {
height: 150
width: 166.6666
background-color: #f5f0
border-radius: 15
box-shadow: 0 5px 0 #d87
/**居中 加粗*/
.start-btn {
bottom: 0;
border-radius: 15
height: 150
width: 166.6666
background-color: #ffe400;
box-shadow: 0 5px 0 #e7930a;
color: #f6251e;
text-align:
font-size: 55
font-weight:
line-height: 150
.award-image {
bottom: 0;
height: 140
width: 130
下面是主要实现代码
//index.js
//获取应用实例
var app = getApp()
circleList: [],//圆点数组
awardList: [],//奖品数组
colorCircleFirst: '#FFDF2F',//圆点颜色1
colorCircleSecond: '#FE4D32',//圆点颜色2
colorAwardDefault: '#F5F0FC',//奖品默认颜色
colorAwardSelect: '#ffe400',//奖品选中颜色
indexSelect: 0,//被选中的奖品index
isRunning: false,//是否正在抽奖
imageAward: [
'../../images/1.jpg',
'../../images/2.jpg',
'../../images/3.jpg',
'../../images/4.jpg',
'../../images/5.jpg',
'../../images/6.jpg',
'../../images/7.jpg',
'../../images/8.jpg',
],//奖品图片数组
onLoad: function () {
var _this =
//圆点设置
var leftCircle = 7.5;
var topCircle = 7.5;
var circleList = [];
for (var i = 0; i & 24; i++) {
if (i == 0) {
topCircle = 15;
leftCircle = 15;
} else if (i & 6) {
topCircle = 7.5;
leftCircle = leftCircle + 102.5;
} else if (i == 6) {
topCircle = 15
leftCircle = 620;
} else if (i & 12) {
topCircle = topCircle + 94;
leftCircle = 620;
} else if (i == 12) {
topCircle = 565;
leftCircle = 620;
} else if (i & 18) {
topCircle = 570;
leftCircle = leftCircle - 102.5;
} else if (i == 18) {
topCircle = 565;
leftCircle = 15;
} else if (i & 24) {
topCircle = topCircle - 94;
leftCircle = 7.5;
circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
this.setData({
circleList: circleList
//圆点闪烁
setInterval(function () {
if (_this.data.colorCircleFirst == '#FFDF2F') {
_this.setData({
colorCircleFirst: '#FE4D32',
colorCircleSecond: '#FFDF2F',
_this.setData({
colorCircleFirst: '#FFDF2F',
colorCircleSecond: '#FE4D32',
}, 500)//设置圆点闪烁的效果
//奖品item设置
var awardList = [];
//间距,怎么顺眼怎么设置吧.
var topAward = 25;
var leftAward = 25;
for (var j = 0; j & 8; j++) {
if (j == 0) {
topAward = 25;
leftAward = 25;
} else if (j & 3) {
topAward = topA
//166.6666是宽.15是间距.下同
leftAward = leftAward + 166.6666 + 15;
} else if (j & 5) {
leftAward = leftA
//150是高,15是间距,下同
topAward = topAward + 150 + 15;
} else if (j & 7) {
leftAward = leftAward - 166.6666 - 15;
topAward = topA
} else if (j & 8) {
leftAward = leftA
topAward = topAward - 150 - 15;
var imageAward = this.data.imageAward[j];
awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
this.setData({
awardList: awardList
//开始抽奖
startGame: function () {
if (this.data.isRunning) return
this.setData({
isRunning: true
var _this =
var indexSelect = 0
var i = 0;
var timer = setInterval(function () {
indexSelect++;
//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
if (i & 1000) {
//去除循环
clearInterval(timer)
//获奖提示
wx.showModal({
title: '恭喜您',
content: '获得了第' + (_this.data.indexSelect + 1) + &个优惠券&,
showCancel: false,//去掉取消按钮
success: function (res) {
if (res.confirm) {
_this.setData({
isRunning: false
indexSelect = indexSelect % 8;
_this.setData({
indexSelect: indexSelect
}, (200 + i))
源码地址：
更多微信小程序优秀源码：
也可以关注我的个人微信号，每天定期推送小程序最新开发技术，优秀源码，各种干货
关注上面微号回复1可以加小程序学习微信群，群里和大家交流学习，一起进步
有问题加我微信：
本文已收录于以下专栏：
相关文章推荐
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个.
上GIF看效果:
简要的说一下.1.外面一圈闪烁的小球是用js控制的样式...
wx-gesture-lock  微信小程序的手势密码
WXCustomSwitch 微信小程序自定义
Switch 组件模板
WeixinAppBdNovel 微信小程序de...
wx-gesture-lock  微信小程序的手势密码
WXCustomSwitch 微信小程序自定义 Switch 组件模板
WeixinAppBdNovel 微信小程序demo：百度小...
概述前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门微信小程序目录为了更好的理解小程序和小程序开发，我们首先来看一下项目的目录。
首先看下根目录下的app.json的文...
1. 首先查询公众号是否存在
https://api./cgi-bin/token?
grant_type=client_credential&appid=APPID&s...
1.ShakeListener 监听器package cn.buaa.import android.content.C
import android.hardware...
JS+H5实现微信的摇一摇功能
var SHAKE_THRESHOLD = 5000;
var last_update = 0;
var x, y, z, ...
微信使用的开发语言和文件很「特殊」。
小程序所使用的程序文件类型大致分为以下几种：
①WXML(WeiXin Mark Language，微信标记语言)
②WXSS(WeiXin Style Shee...
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)用PPT如何打造抽奖效果
下面请跟着图老师小编一起来了解下用PPT如何打造抽奖效果，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！
top1:用PPT如何打造抽奖效果
&　　用PPT打造抽奖效果的教程：
　　是调整好格式存为word后，用PPT打开word文件 　　着重强调是在母版视图里 　　效果图　　男神抽奖版
top2:怎么在PPT2010中添加动作按钮
&　　打开文件，然后在菜单栏中点击&插入&，打开插入工具栏，之后在插入工具栏中选择&形状&工具，如下图所示　　点击形状工具后，就打开所有预置的形状列表，如下图所示，选择我们需要的形状　　选择好形状后，自动退回到ppt文件编辑界面中，这时变成黑色十字形，按下鼠标左键，然后拖动鼠标这样就会在幻灯片中画出一个我们之前选择的形状　　下面图老师小编来分享怎么样在动作按钮上面添加文件，首先选择动作按钮　　在动作按钮上面点击鼠标右键，之后在弹出的右键菜单中选择&编辑文字&，这样我们就可以给动作按钮添加上文字了，这样也就方便我们对这个动作按钮动作的描述　　在右键菜单中点击编辑文字后，在动作按钮上面就可以输入文字了，同时也可以修改文字的大小和等属性，最后修改的文字如下图所示
top3:PPT文档播放没声音了怎么办？
&　　PPT文档是一种声、色、形兼备的，通过声音、版面、生动图像使文字表现的更有张力，更能表达出作者想要陈述的思想。　　在使用PPT文档的过程中有的网友却遇到了这样的问题：PPT文档在本机编辑的时候可以正常播放，但是在另外上进行播放的时候就发现播放没声音了，这该怎么办呢?　　疑难诊断：同样一个PPT文档在本机能够听到声音而在别人的机子上听不到声音，这是因为在本地的电脑中为PPT文档添加背景音乐时，PPT会记住相关音乐文件的具体地址(如&D:课件背景音乐.mp3&)，而在别人的电脑中却没有这个具体目录和相关背景音乐，当然也就听不到声音了。　　解决的方法很简单：将某个PPT文档(如&课件.ppt&)和相关背景音乐到&D:课件&目录下，然后打开PPT文档&课件.PPT&，将&D:课件&目录下的背景音乐添加进来。选中&D:课件&目录下的所有文件并右击之，选择&添加到压缩文件&，按照提示创建一个自解压文件;再在&压缩文件名和参数&对话框的&注释&选项卡添加以下注释：　　Path=D:课件　　SavePath　　setup=课件.PPT　　Silent=1　　overwrite=1　　最后单击&确定&按钮即可。完成上述操作后，双击生成的自解压文件&课件.exe&，就会自动运行&课件.ppt&，并且可以正常地听到该PPT文档所插入的背景声音了。& 搜索“图老师”或者“tulaoshi_com”加关注，每天最新的美食、、、美妆、、手工DIY等教程让你一手全掌握。推荐关注！【扫描下图可直接关注】
点击查看更多与《》相关的文章>>
给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的用PS打造逼真铜牌效果，过去的都会过去，迎接崭新的开始，释放更美好的自己。
用Photoshop打造超酷海报效果,用Photoshop打造超酷海报效果
下面图老师小编要向大家介绍下用photoshop打造油画效果照片，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！
下面这个用Photoshop打造撕纸文字效果教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！
岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的用PS打造蚕丝文字效果，希望大家看完后能赶快学习起来。
用PS打造水粉画效果,用PS打造水粉画效果
热门搜索：
怎么删除网页历史记录的操作方法
QQ消息提示框在哪设置开启
美图秀秀为你打造彩色铅笔素描肖像
教你使用PS为古装美女调出清新柔美效果
如今很多人都想如何利用橡皮泥捏出可爱的小鸡,不要担心,今天我就来告诉你如何解决这件事情,接下来介绍的是如何利用橡皮泥捏出可爱的小鸡,如果你对这个内容很感兴趣的话，就和我一起来学习一下吧，希望这些能够帮助到你。
如今很多人都想知道怎样制作创意礼物,不要担心,今天我就来告诉你如何解决这件事情,接下来介绍的是怎样制作创意礼物,如果你对这个内容很感兴趣的话，就和我一起来学习一下吧，希望这些能够帮助到你。
如今很多人都节日应该送什么礼物给男友,不要担心,今天我就来告诉你如何解决这件事情,接下来介绍的是节日应该送什么礼物给男友如果你对这个内容很感兴趣的话，就和我一起来学习一下吧，希望这些能够帮助到你。
如今很多人都想知道怎样自制包包,不要担心,今天我就来告诉你如何解决这件事情,接下来介绍的是怎样自制包包,如果你对这个内容很感兴趣的话，就和我一起来学习一下吧，希望这些能够帮助到你。
王者荣耀是当下非常火热的一款网游，不管男女老少很多朋友都非常喜欢玩，要想在王者荣耀里面玩的尽兴就要学会掌握一定的王者荣耀技巧，这样更加能提升你的手法，那么王者荣耀技巧有哪些呢？
微信是我们日常生活中经常使用的一种通讯软件工具，我们可以有效的利用微信和我们的家人、朋友、同事进行沟通。但是很多人在使用微信的过程中经常不会不小心删除了聊天记录。那么，此时该如何恢复微信的聊天记录呢？
大家出门在外可能经常会遇到下雨又没带伞的情况，随着社会的发展，现今在广州一种共享雨伞的投入使用大大的便利了市民的生活。我们知道广州的地铁服务一向不错，早在2008年开始就推出了地铁便民雨伞的服务。那么，共享雨伞和地铁便民雨伞是一样的吗？有什么不同呢？
2017年最受欢迎的生活服务APP！！生活服务类App的出现为日常生活带来极大便利，我们可以通过手机客户端预约各种家政服务，足不出户就能够享受实惠、便捷的生活服务，那么接下来我为大家推荐一些生活中必备生活app。
由于现在抢红包大热起来，很多app都开始支持发红包抢红包了，因此也出现了微信抢红包神器，可以自动抢微信红包,肯定比认为手动操作快,有消息就会自动打开,然后打开红包。今天就给大家分享2017微信自动抢红包神器大全。
2017手机赚钱软件排行榜！！很多朋友都在苦恼每天的钱不够话，空闲时间不知道怎么打发，总想寻找一种简单的赚钱方式，我们的手机app就有很多，下面具体给大家介绍手机赚钱软件有哪些，总有一款你中意的。
经常玩微信的朋友都知道，微信小程序已经全面上线了，对于小程序的出现是否会引发App变革众说纷纭，但不可否认的是小程序能够带给用户及产商一定的便利，那么今天为大家汇总目前上线的一些实用小程序。
男女交往一直都是人们比较关注的一个问题，都说相爱容易，相处不易，交往过的朋友应该都能深刻的体会到，女生常常抱怨着让男生理解自己，但男生也希望多体谅一下他们。尤其不要老是问一些无法回答的问题来考验他们。
很多朋友都信风水一说，对于自己家里房屋客厅的装修也是有一定要求的，因为客厅的风水关系着整个家居的运势，更关系着主人的财运与健康，因而客厅里的风水禁忌是需要我们谨慎注意的，那么风水学中客厅风水禁忌有哪些呢？
春天已经来临了，夏天也不远了，新的一才刚刚开始，时尚爱美的美眉们最关注的就是春夏服装设计的流行趋势了，早早的把握住时尚趋势走在流行的最尖端，今天就给大家整理分享2017春夏女装设计流行趋势 ，你绝对不能错过的亮点。技术交流QQ群：
jquery特效
javascript特效
html5_css3特效
>jquery仿360云盘抽奖商品方格子排列单个单个格子闪过抽奖活动代码
jquery仿360云盘抽奖商品方格子排列单个单个格子闪过抽奖活动代码
日运行环境：IE6 IE7 IE8及以上 Firefox
jquery仿360云盘抽奖商品方格子排列单个单个格子闪过抽奖活动代码，jquery抽奖代码,抽奖效果,jquery仿360云盘抽奖效果,360云盘抽奖效果
上一篇：下一篇：
热门网页特效
友情链接：&& &&
版权声明:本站资源均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
公众号: zhaotexiao