Vista previa del efecto:
1. El proceso de implementación de la lotería simulada
Principio de rotación: Al soportar el atributo CSS3, la configuración de rotar (ángulo delg) se establece, gire en sentido horario cuando el ángulo es positivo y gire en sentido antihorario cuando sea negativo. Si es IE8 y abajo, use la configuración de posicionamiento absoluto para simular la rotación de ángulo con la parte superior e izquierda.
Método Ejecutar, el ángulo del parámetro se refiere al ángulo
La copia del código es la siguiente:
function run (ángulo) {
if (isie) {
cosdeg = math.cos (ángulo * math.pi / 180);
sindeg = math.sin (ángulo * math.pi / 180);
con (Target.Filters.Item (0)) {
M11 = m22 = cosdeg; M12 = -(m21 = sindeg);
}
Target.style.top = (Orginh - Target.Offsetheight) / 2 + "Px";
Target.style.left = (Orginw - Target.OffSetWidth) / 2 + "Px";
} else if (target.style.mozTransform! == Undefined) {
Target.Style.MozTransform = "Rotate (" + Angle + "DEG)";
} else if (target.style.otransform! == Undefined) {
Target.style.otransform = "Rotate (" + Angle + "Deg)";
} else if (target.style.webkittransform! == undefined) {
Target.style.webkitTransform = "rotar (" + ángulo + "DEG)";
} demás {
Target.Style.Transform = "Rotate (" + Angle + "DEG)";
}
}
Simule la aceleración de la plataforma giratoria, la velocidad constante y la desaceleración. Cuando el ángulo es inferior a un cierto valor, el coeficiente de 1.01 se usa como aceleración. Cuando es mayor que cierto valor, el coeficiente de desaceleración es de 0.99 se usa para disminuir. Establezca el número negativo como el valor de desaceleración (es decir, TMP variable), y luego obtenga el valor en Negativo 360 (es decir, variable M), y cuando es mayor que este valor, el plato giratorio se detiene.
La copia del código es la siguiente:
var tmp = -900;
var m = -ParseInt (Math.random () * 360);
timer = setInterval (function () {
if (i> 3000) {
tmp = parseInt (tmp * 0.99);
if (tmp> m) {
tmp = m;
ClearInterval (temporizador);
msg (m);
}
ejecutar (tmp);
}
else if (i> 1000) {
i = i + 45;
ejecutar (i);
}
demás {
i = parseint ((i + 1) * 1.01);
ejecutar (i);
}
}, 50);
Comience una lotería y reinicie la lotería
La copia del código es la siguiente:
<input id = "test" type = "button" value = "Luck Draw" />
<input id = "reiniciar" style = "display: none;" type = "botón" valor = "dibujar nuevamente" />
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none";
showmsg ();
}
m $ ('reiniciar'). onClick = function () {
m $ ('reiniciar'). style.display = "none";
if (isie) {
m $ ("demo"). style.top = "0px";
m $ ("demo"). style.left = "0px";
} else if (m $ ("demo"). style.mozTransform! == Undefined) {
m $ ("demo"). style.mozTransform = 'Rotate (0deg)';
} else if (m $ ("demo"). style.otransform! == Undefined) {
m $ ("demo"). style.otransform = 'Rotate (0deg)';
} else if (m $ ("demo"). style.webkittransform! == indefinido) {
m $ ("demo"). style.webkittransform = 'rotate (0deg)';
} demás {
m $ ("demo"). style.transform = 'Rotate (0deg)';
}
m $ ('test'). style.display = "bloque";
i = 0;
}
2. Complete la demostración del código:
Copie el código de la siguiente manera: <! DocType Html>
<html>
<Evista>
<title> Raffle Lottery </title>
<style type = "text/css">
#container {ancho: 400px; altura: 400px; posición: relativo; margen: 0 auto;}
#demo {posición: absoluto; filtro: progid: dximagetransform.microsoft.matrix (dimensionmethod = "expandir automático");}
</style>
</ablo>
<body style = "altura: 1000px;">
<div id = "contenedor">
<div id = "demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<input id = "test" type = "button" value = "Luck Draw" />
<input id = "reiniciar" style = "display: none;" type = "botón" valor = "dibujar nuevamente" />
<div id = "msg">
</div>
<script type = "text/javaScript">
var m $ = function (id) {return document.getElementById (id); }
var ua = navigator.useragent;
var isie = /msie/i.test(ua) &&! Window.opera;
var i = 1, sindeg = 0, cosdeg = 0, timer = null;
var mRotate = function () {
var rotate = function (target, msg) {
objetivo = m $ (objetivo);
var organw = target.clientwidth, orginh = target.clientHeight;
ClearInterval (temporizador);
function run (ángulo) {
if (isie) {
cosdeg = math.cos (ángulo * math.pi / 180);
sindeg = math.sin (ángulo * math.pi / 180);
con (Target.Filters.Item (0)) {
M11 = m22 = cosdeg; M12 = -(m21 = sindeg);
}
Target.style.top = (Orginh - Target.Offsetheight) / 2 + "Px";
Target.style.left = (Orginw - Target.OffSetWidth) / 2 + "Px";
} else if (target.style.mozTransform! == Undefined) {
Target.Style.MozTransform = "Rotate (" + Angle + "DEG)";
} else if (target.style.otransform! == Undefined) {
Target.style.otransform = "Rotate (" + Angle + "Deg)";
} else if (target.style.webkittransform! == undefined) {
Target.style.webkitTransform = "rotar (" + ángulo + "DEG)";
} demás {
Target.Style.Transform = "Rotate (" + Angle + "DEG)";
}
}
var tmp = -900;
var m = -ParseInt (Math.random () * 360);
timer = setInterval (function () {
if (i> 3000) {
tmp = parseInt (tmp * 0.99);
if (tmp> m) {
tmp = m;
ClearInterval (temporizador);
msg (m);
}
ejecutar (tmp);
}
else if (i> 1000) {
i = i + 45;
ejecutar (i);
}
demás {
i = parseint ((i + 1) * 1.01);
ejecutar (i);
}
}, 50);
}
return {rotar: rotar}
} ();
función showmsg () {
Mrotate.rotate ("demo", función msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml += "222222222";
}
else if (m> -150 && m <-90) {
m $ ("msg"). innerhtml += "3333333333";
}
else if (m> -210 && m <-150) {
m $ ("msg"). innerhtml += "444444";
}
else if (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "55555555";
}
else if (m> -330 && m <-270) {
m $ ("msg"). innerhtml += "66666666";
} demás {
m $ ("msg"). innerhtml += "111111111";
}
m $ ('reiniciar'). style.display = "bloque";
});
}
window.onload = function () {
m $ ('test'). onClick = function () {
m $ ('test'). style.display = "none";
showmsg ();
}
m $ ('reiniciar'). onClick = function () {
m $ ('reiniciar'). style.display = "none";
if (isie) {
m $ ("demo"). style.top = "0px";
m $ ("demo"). style.left = "0px";
} else if (m $ ("demo"). style.mozTransform! == Undefined) {
m $ ("demo"). style.mozTransform = 'Rotate (0deg)';
} else if (m $ ("demo"). style.otransform! == Undefined) {
m $ ("demo"). style.otransform = 'Rotate (0deg)';
} else if (m $ ("demo"). style.webkittransform! == indefinido) {
m $ ("demo"). style.webkittransform = 'rotate (0deg)';
} demás {
m $ ("demo"). style.transform = 'Rotate (0deg)';
}
m $ ('test'). style.display = "bloque";
i = 0;
}
}
</script>
</body>
</html>