主要实现起跑与终点的加减速效果

tp5  html

{php}
$prizeList = [
	'谢谢参与',
	'5元红包',
	'谢谢参与',
	'5元红包',
	'谢谢参与',
	'5元红包',
	'谢谢参与',
	'5元红包',
];
{/php}

<div class="prize">
	{volist name="$prizeList" id="data" key="k"}
	<div class="item e">
		<div class="box">
			<div class="box-main">
				<div class="text">
					<p>{$data}</p>
				</div>
			</div>
		</div>
	</div>
	{if condition="$k eq 4"}
	<div class="item prize-btn">
		<div class="box">
			<div class="box-main">
				<div class="text">
					<p class="txt">立即<br/>抽奖</p>
					<p class="border">立即<br/>抽奖</p>
				</div>
			</div>
		</div>
	</div>
	{/if}
	{/volist}
</div>

css

body{
	background:#fafafa;
}
.prize{
	margin:10px auto;
	width:450px;
	height:450px;
	background:#fff;
	display:flex;
	flex-wrap:wrap;
	padding:38px;
	background-image:url('/tpl/default/skin/img/prize_bg.png');
	background-size:cover;
	
}
.prize .item{
	width:33.333%;
	height:33.333%;
	padding:5px;
}
.prize .item.on .box-main{
	background:#fff7b9;
	border:2px solid #fee332;
}
.prize .item .box{
	background:#ffcbbe;
	height:100%;
	border-radius:10px;
}
.prize .item .box-main{
	background:#fff;
	height:90%;
	border-radius:10px;
	display:flex;
	align-items:center;
	border:2px solid #fff;
}
.prize .item .box-main .text{
	padding:5px;
	text-align:center;
	margin:0 auto;
	font-size:20px;
	font-weight:700;
	color:#f45722;
}


.prize .prize-btn{
	
}
.prize .prize-btn .box{
	background:#ffa101;
}
.prize .prize-btn .box:hover{
	transform:scale(0.97); 
	cursor:pointer;
}
.prize .prize-btn .box-main{
	background:url('/tpl/default/skin/img/prize_btn_bg.png');
	border:0;
}
.prize .prize-btn .box-main .text{
	position:relative;
	font-size:32px;
	letter-spacing:3px;
	line-height:36px;
	color:#fff;
	position:relative;
}
.prize .prize-btn .box-main .text .txt{
	position:relative;
	z-index:2;
	font-weight:700;
}
.prize .prize-btn .box-main .text .border{
	position:absolute;
	top:5px;
	left:5px;
	z-index:1px;
	font-weight:700;
	-webkit-text-stroke:5px #ff4700;
}

js

$(function(){
	

	var prize_index = 1; //中奖索引
	var loop = 5;//圈数
	
	var interval = 50;//全速项目间隔时间
	
	var start_duration = 300; //起跑加速时间段
	var start_item = 3; //起跑加速项目数
	
	var end_duration = 800; //终点减速时间段
	var end_item = 8; //终点减速项目数
	
	var items = $('.prize .e').length;//奖品数
	var jump = loop*items+prize_index; //总跳灯次数
	
	$('.prize-btn').click(function(){
		if($(this).hasClass('active')){
			return false;
		}
		
		
		$('.prize-btn').addClass('active');
		run(0,0);
	});
	
	
	//跑灯
	//index //灯class索引
	//count 次数
	function run(index,count){
		var duration_arr = curve_time();

		$('.prize .e').removeClass('on');
		$('.prize .e').eq(index).addClass('on');
		
		if(count<jump){
			var lastIndex = last_index(count);
			var lastTime = last_wait(count);
			//console.log(lastIndex,lastTime,count);
			setTimeout(function(){
				count = count+1;
				run(lastIndex,count);
			},lastTime);
		}else{
			suc();
		}
			
	}	
			
	
	
	//时间曲线
	var curve_time = function(){
		var duration_arr = [];

		for(var i=0;i<jump;i++){
			
			if(i<start_item){ 
				//起跑加速
				var num = start_duration - (start_duration/start_item)*i;
			}else if(i>jump-end_item){
				//终点减速
				var num = end_duration - (end_duration/end_item*(jump-i));
			}else{
				num = interval;
			}
			
			if(num<interval){
				num = interval;
			}
			
			duration_arr.push(num);
		}
		return duration_arr;
	}
	

	
	//下一灯class索引
	//index 当前次数
	var last_index = function(index){
		if(index<items){
			var lastIndex = index+1;
		}else{
			var lastIndex = (index%items)+1;
		}
		
		if(lastIndex == items){
			lastIndex = 0;
		}
		
		if(lastIndex == 3){
			return 4;
		}
		if(lastIndex == 4){
			return 7;
		}
		if(lastIndex == 5){
			return 6;
		}
		if(lastIndex == 6){
			return 5;
		}
		if(lastIndex == 7){
			return 3;
		}
		return lastIndex;
	}
	
	//下一个等待时间
	var last_wait = function(index){
		var ct = curve_time();
		return ct[index];
	}
	
	
	//成功提示
	var suc = function suc(){
		setTimeout(function(){
			var txt = $('.prize .e.on').find('.text p').text();
			alert(txt);
			$('.prize-btn').removeClass('active');
		},1000);
	}
	
	
	
});

转盘背景图

按钮背景图