<p> 做這個(gè)轉(zhuǎn)盤抽獎(jiǎng)效果所用到的圖片在文章的最下面提供給大家,轉(zhuǎn)盤抽獎(jiǎng)是各大電商網(wǎng)站上常見一種效果,去度娘上搜索了一下,大多數(shù)都是使用插件完成的,并不能滿足我的要求所以在JQ 的基礎(chǔ)上自己寫了一個(gè)版本.</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎(jiǎng)</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結(jié)構(gòu)部分 -->
<div id="bg">
<img src="img/pointer.png" alt="pointer" id="img1">
<img src="img/turntable.png" alt="turntable" id="img2">
</div>
<!-- 這里是jq部分 -->
<script>
// 拿到兩個(gè)img標(biāo)簽
var oPointer = $("#img1");
var oTurntable = $("#img2");
// 旋轉(zhuǎn)過每個(gè)獎(jiǎng)項(xiàng)大約的角度
var cat = 51.4;
var num = 0;
// 點(diǎn)擊按鈕后旋轉(zhuǎn)沒結(jié)束不允許第二次旋轉(zhuǎn)
var offOn = true;
var temp = 0;
document.title = "";
// 點(diǎn)擊方法
oPointer.click(function() {
if(offOn) {
offOn = !offOn;
ratating();
}
});
function ratating() {
// var timer = null;
var rdm = 0;
// 隨機(jī)計(jì)算出旋轉(zhuǎn)的角度
rdm = Math.floor(Math.random() * (3600 - 3603 + 1) + 3603);
// 旋轉(zhuǎn)
oTurntable.css({
transition: "all 4s",
transform: "rotate(" + (rdm + temp) + "deg)"
});
// 旋轉(zhuǎn)后判斷對(duì)應(yīng)角度的獎(jiǎng)項(xiàng)
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("免息服務(wù)");
} else if(num <= cat * 6) {
alert("提交白金");
} else if(num <= cat * 7) {
alert("未中獎(jiǎng)");
}
}, 4000);
}
</script>
</body>
</html>
</pre>
<p> 上面的這種方式是點(diǎn)擊以后旋轉(zhuǎn)到隨機(jī)到的度數(shù)后自動(dòng)停止,有時(shí)候我們的需求并不是這樣,需要點(diǎn)擊開始然后再次點(diǎn)擊再結(jié)束旋轉(zhuǎn).這種方式看下面代碼.</p>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎(jiǎng)</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結(jié)構(gòu)部分 -->
<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("免息服務(wù)");
} else if(num <= cat * 6) {
alert("提交白金");
} else if(num <= cat * 7) {
alert("未中獎(jiǎng)");
}
}
</script>
</body>
</html>
</pre>
