css3js实现h5转盘抽奖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <style>
.pan {
width: 5.73rem;
height: 6.71rem;
background: url(a.xnimg/wap/wechatLive/img/scroll-back.png) no-repeat 50% 50%/100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.scroll {
position: absolute;
width: 4.78rem;
height: 4.77rem;
left: 50%;
top: 0.47rem;
background: url(a.xnimg/wap/wechatLive/img/scroll-table.png) no-repeat 50% 50%/100%;
z-index: 2;
transform: translateX(-50%);
/*transition: all 2111ms linear;*/
}
.row {
position: absolute;
left: 50%;
top: 1.75rem;
width: 1.59rem;
height: 1.9rem;
background: url(a.xnimg/wap/wechatLive/img/scroll-start.png) no-repeat 50% 50%/100%;
z-index: 3;
transform: translateX(-50%);
js控制css3动画触发}
</style>
<script>
function r(resizeNum){
var winW = window.innerWidth,
html = document.querySelector('html');
html.style.fontSize = winW*0.15625+'px';
//修复⼩⽶等⼩字体出现的布局bug
var fontSize = parseFloat(html.style.fontSize, 10),
computeFontSize = ComputedStyle(html).fontSize, 10);
if (fontSize !== computeFontSize) {
html.style.fontSize = fontSize * fontSize / computeFontSize+'px';
}
if(winW > window.screen.width && resizeNum<=10){
setTimeout(function(){
r(++resizeNum);
}, 10);
}
}
r(0);
var isOperate = true,
rotate = 270,
totalRotate = 0;
function change() {
var scroll = document.querySelector('.scroll'),
deg = getCurrentRotationFixed();
//服务结果未返回，⾛requestanimationframe渲染动画
if (isOperate) {
/
/每次增加⾓度10°
ansform = 'translate3d(-50%,0,0) rotate('+ (deg+10) +'deg)';
} else {
//设置⼀个最后想要停留的⾓度为n*360+rotate，在本次n我取3
totalRotate = 1080+rotate;
//设置transition的时间为指定时间，为了保证动画流畅从requestanimationframe过渡到transition
// 16.7ms = (1/60)*1000，每帧增加10度，所有每增加1度需要16.7ms/10 = 1.67ms
ansitionDuration = totalRotate*(16.7/10)+'ms';
ansitionProperty = 'all';
ansitionTimingFunction = 'cubic-bezier(0.48, 0.48, 0.68, 0.97)';
ansform = 'translate3d(-50%,0,0) rotate('+ totalRotate +'deg)'
}
}
//获取transform rotate⾓度
function getCurrentRotationFixed() {
var el = document.querySelector(".scroll");
var st = ComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
"";
if( tr !== "none") {
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var scale = Math.sqrt(a*a + b*b);
var radians = Math.atan2(b, a);
if ( radians < 0 ) {
radians += (2 * Math.PI);
}
var angle = und( radians * (180/Math.PI));
} else {
var angle = 0;
}
return angle;
}
function bindEvent() {
document.querySelector('.row').addEventListener('click', function(e) {
var scroll = document.querySelector('.scroll');
isOperate = true;
ansform = 'translate3d(-50%,0,0) rotate('+ getCurrentRotationFixed() +'deg)';                ansitionDuration = '0ms';
//模拟服务端请求，返回中奖结果
setTimeout(function(e) {
//修改标记，动画停⽌，过度到tansition
isOperate = false;
//模拟服务返回的中奖结果
rotate = Math.random()*360;
}, 2000)
})
}
document.addEventListener('DOMContentLoaded', function(e) {
bindEvent();
})
</script>
</head>
<body>
<div class="pan">
<div class="row"></div>
<div class="scroll">
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。