Aperçu de l'effet:
1. Le processus de mise en œuvre de la loterie simulée
Principe de rotation: Lors de la prise en charge de l'attribut CSS3, Transformer: Rotation (Angle Deg) Le réglage est réglé, tournez dans le sens horaire lorsque l'angle est positif et tournez dans le sens antihoraire lorsqu'il est négatif. S'il est IE8 et ci-dessous, utilisez les paramètres de positionnement absolus pour simuler la rotation des angles à l'aide du haut et de la gauche.
Méthode d'exécution, l'angle de paramètre fait référence à l'angle
La copie de code est la suivante:
fonction Run (angle) {
if (isie) {
cosDeg = math.cos (angle * math.pi / 180);
Sindeg = math.sin (angle * math.pi / 180);
avec (cible.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 = "rotation (" + angle + "deg)";
} else if (cible.style.webkitTransform! == Undefined) {
Target.style.webkitTransform = "Rotate (" + Angle + "Deg)";
} autre {
Target.style.Transform = "Rotate (" + Angle + "Deg)";
}
}
Simuler une accélération de la platine, une vitesse constante et une décélération. Lorsque l'angle est inférieur à une certaine valeur, le coefficient de 1,01 est utilisé comme accélération. Lorsqu'il est supérieur à une certaine valeur, le coefficient de décélération est de 0,99 est utilisé pour ralentir. Définissez le nombre négatif comme valeur de la décélération (c'est-à-dire la variable TMP), puis obtenez la valeur en 360 négatifs (c'est-à-dire la variable M), et lorsqu'elle est supérieure à cette valeur, la platine s'arrête.
La copie de code est la suivante:
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 (temporisateur);
MSG (M);
}
Run (TMP);
}
else if (i> 1000) {
i = i + 45;
courir (i);
}
autre {
i = parseInt ((i + 1) * 1.01);
courir (i);
}
}, 50);
Démarrer une loterie et réinitialiser la loterie
La copie de code est la suivante:
<input id = "test" type = "bouton" value = "Luck Draw" />
<input id = "redémarrer" style = "affichage: aucun;" type = "bouton" value = "dessiner à nouveau" />
m $ ('test'). onclick = function () {
m $ ('test'). style.display = "aucun";
showmsg ();
}
m $ ('redémarrer'). onclick = function () {
m $ ('redémarrer'). style.display = "aucun";
if (isie) {
M $ ("Demo"). Style.top = "0px";
m $ ("démo"). style.left = "0px";
} else if (m $ ("démo"). style.moztRansform! == Undefined) {
M $ ("Demo"). Style.MozTransform = 'Rotate (0Deg)';
} else if (m $ ("démo"). style.otransform! == Undefined) {
m $ ("démo"). style.otransform = 'rotate (0deg)';
} else if (m $ ("démo"). style.webkitTransform! == Undefined) {
m $ ("démo"). style.webkitTransform = 'rotate (0deg)';
} autre {
m $ ("démo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "bloc";
i = 0;
}
2. Demo de code complet:
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<Title> Loterie de tombola </TITAL>
<style type = "text / css">
#Container {largeur: 400px; hauteur: 400px; position: relative; marge: 0 auto;}
#Demo {position: absolu; filtre: PROGID: dximageTransform.microsoft.matrix (sizeMethod = "Auto Expand");}
</ style>
</ head>
<Body Style = "Height: 1000px;">
<div id = "conteneur">
<div id = "Demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png" />
</div>
</div>
<input id = "test" type = "bouton" value = "Luck Draw" />
<input id = "redémarrer" style = "affichage: aucun;" type = "bouton" value = "dessiner à nouveau" />
<div id = "msg">
</div>
<script type = "text / javascript">
var m $ = fonction (id) {return document.getElementById (id); }
var ua = Navigator.UserAgent;
var isie = /msie/i.test(ua) &&! window.opera;
var i = 1, Sindeg = 0, cosDeg = 0, tempor = null;
var mrotate = function () {
var rotate = fonction (cible, msg) {
cible = m $ (cible);
var organw = cible.clientwidth, ombinh = cible.clientHeight;
ClearInterval (temporisateur);
fonction Run (angle) {
if (isie) {
cosDeg = math.cos (angle * math.pi / 180);
Sindeg = math.sin (angle * math.pi / 180);
avec (cible.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 = "rotation (" + angle + "deg)";
} else if (cible.style.webkitTransform! == Undefined) {
Target.style.webkitTransform = "Rotate (" + Angle + "Deg)";
} autre {
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 (temporisateur);
MSG (M);
}
Run (TMP);
}
else if (i> 1000) {
i = i + 45;
courir (i);
}
autre {
i = parseInt ((i + 1) * 1.01);
courir (i);
}
}, 50);
}
return {Rotate: Rotate}
} ();
fonction showmsg () {
mrotate.rotate ("démo", fonction msg (m) {
if (m> -90 && m <-30) {
m $ ("msg"). innerhtml + = "22222222";
}
else if (m> -150 && m <-90) {
m $ ("msg"). innerhtml + = "333333333";
}
else if (m> -210 && m <-150) {
m $ ("msg"). innerhtml + = "444444";
}
else if (m> -270 && m <-210) {
m $ ("msg"). innerhtml + = "5555555";
}
else if (m> -330 && m <-270) {
m $ ("msg"). innerhtml + = "6666666";
} autre {
m $ ("msg"). innerhtml + = "111111111";
}
m $ ('redémarrer'). style.display = "bloc";
});
}
window.onload = function () {
m $ ('test'). onclick = function () {
m $ ('test'). style.display = "aucun";
showmsg ();
}
m $ ('redémarrer'). onclick = function () {
m $ ('redémarrer'). style.display = "aucun";
if (isie) {
M $ ("Demo"). Style.top = "0px";
m $ ("démo"). style.left = "0px";
} else if (m $ ("démo"). style.moztRansform! == Undefined) {
M $ ("Demo"). Style.MozTransform = 'Rotate (0Deg)';
} else if (m $ ("démo"). style.otransform! == Undefined) {
m $ ("démo"). style.otransform = 'rotate (0deg)';
} else if (m $ ("démo"). style.webkitTransform! == Undefined) {
m $ ("démo"). style.webkitTransform = 'rotate (0deg)';
} autre {
m $ ("démo"). style.transform = 'rotate (0deg)';
}
m $ ('test'). style.display = "bloc";
i = 0;
}
}
</cript>
</docy>
</html>