JQ实现转盘抽奖的两种方式
2016-10-19 本文已影响0人
MaguaSize
<p> 做这个转盘抽奖效果所用到的图片在文章的最下面提供给大家,转盘抽奖是各大电商网站上常见一种效果,去度娘上搜索了一下,大多数都是使用插件完成的,并不能满足我的要求所以在JQ 的基础上自己写了一个版本.</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js">
</script>
<!-- 这里是css部分 -->
<style>
#bg {
width: 650px;
height: 600px;
margin: 0 auto;
background: url(img/turntable-bg.jpg) no-repeat;
position: relative;
}
img:nth-of-type(1) {
position: absolute;
z-index: 10;
top: 155px;
left: 247px;
}
img:nth-of-type(2) {
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
}
</style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
<div id="bg">
<img src="img/pointer.png" alt="pointer" id="img1">
<img src="img/turntable.png" alt="turntable" id="img2">
</div>
<!-- 这里是jq部分 -->
<script>
// 拿到两个img标签
var oPointer = $("#img1");
var oTurntable = $("#img2");
// 旋转过每个奖项大约的角度
var cat = 51.4;
var num = 0;
// 点击按钮后旋转没结束不允许第二次旋转
var offOn = true;
var temp = 0;
document.title = "";
// 点击方法
oPointer.click(function() {
if(offOn) {
offOn = !offOn;
ratating();
}
});
function ratating() {
// var timer = null;
var rdm = 0;
// 随机计算出旋转的角度
rdm = Math.floor(Math.random() * (3600 - 3603 + 1) + 3603);
// 旋转
oTurntable.css({
transition: "all 4s",
transform: "rotate(" + (rdm + temp) + "deg)"
});
// 旋转后判断对应角度的奖项
setTimeout(function() {
offOn = !offOn;
num = (rdm + temp) % 360;
temp += rdm;
if(num <= cat * 1) {
alert("4999元");
} else if(num <= cat * 2) {
alert("条50元");
} else if(num <= cat * 3) {
alert("10元");
} else if(num <= cat * 4) {
alert("5元");
} else if(num <= cat * 5) {
alert("免息服务");
} else if(num <= cat * 6) {
alert("提交白金");
} else if(num <= cat * 7) {
alert("未中奖");
}
}, 4000);
}
</script>
</body>
</html>
</pre>
<p> 上面的这种方式是点击以后旋转到随机到的度数后自动停止,有时候我们的需求并不是这样,需要点击开始然后再次点击再结束旋转.这种方式看下面代码.</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<script type="text/javascript" src="js/jquery-2.2.3.min.js">
</script>
<!-- 这里是css部分 -->
<style>
#bg {
width: 650px;
height: 600px;
margin: 0 auto;
background: url(img/turntable-bg.jpg) no-repeat;
position: relative;
}
img:nth-of-type(1) {
position: absolute;
z-index: 10;
top: 155px;
left: 247px;
}
img:nth-of-type(2) {
position: absolute;
z-index: 5;
top: 60px;
left: 116px;
}
</style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
<div id="bg">
<img src="img/pointer.png" alt="pointer" id="img1">
<img src="img/turntable.png" alt="turntable" id="img2">
</div>
<!-- 这里是jq部分 -->
<script>
var oPointer = $("#img1");
var oTurntable = $("#img2");
var cat = 51.4;
var offOn = true;
var num = 0;
var time = null;
var begin = 0;
var speed = 0;
var compare = true;
oPointer.click(function() {
if (compare) {
if(offOn) {
speed = 20;
time = setInterval(function() {
begin += speed;
oTurntable.css({
transform: "rotate(" + (begin) + "deg)"
});
}, 16);
} else {
compare = false;
setTimeout(function() {
clearInterval(time);
time = setInterval(function() {
if(speed <= 0) {
compare = true;
clearInterval(time);
result(begin);
}
begin += speed;
var spe = Math.random()*(0.4-0.2+0.1)+0.2;
// console.log(spe);
speed -= spe;
oTurntable.css({
transform: "rotate(" + (begin) + "deg)"
});
}, 16);
}, 500);
}
offOn = !offOn;
}
});
function result(ac) {
num = ac % 360;
if(num <= cat * 1) {
alert("4999元");
} else if(num <= cat * 2) {
alert("条50元");
} else if(num <= cat * 3) {
alert("10元");
} else if(num <= cat * 4) {
alert("5元");
} else if(num <= cat * 5) {
alert("免息服务");
} else if(num <= cat * 6) {
alert("提交白金");
} else if(num <= cat * 7) {
alert("未中奖");
}
}
</script>
</body>
</html>
</pre>
turntable.png
turntable-bg.jpg
turntable.png
