jquery实现转盘抽奖--基于奖品转动的转盘

最新推荐文章于 2023-03-16 17:43:48 发布

zhangwenbang

最新推荐文章于 2023-03-16 17:43:48 发布

阅读量2.3k

点赞数

分类专栏： JavaScript 文章标签： javascript jquery js js抽奖转盘抽奖

本文链接：https://blog.csdn.net/zhangwenbang/article/details/45871605

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

昨天写了js九宫格抽奖demo，今天试着写一下js转盘抽奖（奖品内容转动）。

思路：我们先分析一下，转盘转动其实和九宫格转动没太大区别，不过九宫格转动是按顺序改变不同单元格的样式，而转盘则是改变转动角度，这里要使用CSS3中的transform属性，改变rotate（）中的角度参数，在这里要特别注意一点：那就是每次改变其实是从最原始的位置做变动，角度的计算要按照最初计算，而不是从你上一步点击按钮的位置进行计算角度，代码中的偏移量不是表示和上一次操作的偏移，而是和原始位置的偏移，比如当前2号位置是被指针正对着的，下次转动如果是转到3号位置，要计算的是原始图中3号位置与1号位置的偏移度数，而不是与2号位置的偏移度数。整个js代码最重要的就是这一部分了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#menu{
	width:400px;
	height:400px;
	background-color:#999;
	border-radius:200px;
	background-image:url(t.png);
}
#point{
	position:absolute;
	width:200px;
	height:200px;
	left:100px;
	top:100px;
	border-radius:100px;
	background-image:url(get.png);
	cursor:pointer;
	transition: transform 2s;
}
</style>
</head>

<body>
<div id="menu">
</div>
<div id="point">
<h1 style="padding-top:60px;padding-left:80px;">GO</h1>
</div>
<script src="../九宫格抽奖/jquery-1.11.2.js"></script>
<script>
$(function(e){
	var firstDeg=0;//表示最终停留数字偏移的角度
	var targetDeg=-1;//表示最终停留的数字
	var job=null;
	var l=0;//用于计算转盘转过的角度数
	$("#point").click(function(e){
		l=0;
		targetDeg=Math.floor(Math.random()*4+1);
		firstDeg=360-90*(targetDeg-1);
	    job=setTimeout(runR,100);

	});
	function runR(){
		if(l>=360*9+firstDeg)//当到达目标位置后，停止下来
		{
			$("#menu").css("transform","rotate("+firstDeg+"deg)");
			clearTimeout(job);
			return;
		}
		l=l+18;
		$("#menu").css("transform","rotate("+l+"deg)");//按照固定累加角度转动
		if(l>360*8+firstDeg||l<360)//设置不同转速
		{
		   job=setTimeout(runR,100);
		}
		else
		{
			job=setTimeout(runR,10);
		}
	}
});
</script>
</body>
</html>

一下是测试时用的图

zhangwenbang

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery实现转盘抽奖--基于奖品转动的转盘

昨天写了js九宫格抽奖demo，今天试着写一下js转盘抽奖（奖品内容转动）。思路：我们先分析一下，转盘转动其实和九宫格转动没太大区别，不过九宫格转动是按顺序改变不同单元格的样式，而转盘则是改变转动角度，这里要使用CSS3中的transform属性，改变rotate（）中的角度参数，在这里要特别注意一点：那就是每次改变其实是从最原始的位置做变动，角度的计算要按照最初计算，而不是从你上一步
复制链接

扫一扫