Предварительный просмотр эффекта:
1. Процесс реализации моделируемой лотереи
Принцип вращения: при поддержке атрибута CSS3 преобразование: повернуть (угол DEG) установлен, поверните по часовой стрелке, когда угол положительный, и поверните против часовой стрелки, когда он отрицательный. Если это IE8 и ниже, используйте настройки абсолютного позиционирования для моделирования вращения угла с помощью верхней и слева.
Метод запуска, угол параметра относится к углу
Кода -копия выглядит следующим образом:
функция запустить (угол) {
if (isie) {
cosdeg = math.cos (angel * math.pi / 180);
sindeg = math.sin (angel * math.pi / 180);
с (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.mogransform = "utate (" + angel + "deg)";
} else if (target.style.otransform! == undefined) {
target.style.otransform = "utate (" + angel + "deg)";
} else if (target.style.webkittransform! == undefined) {
target.style.webkittransform = "utate (" + angel + "deg)";
} еще {
target.style.transform = "utate (" + angel + "deg)";
}
}
Имитировать поворотное ускорение, постоянную скорость и замедление. Когда угол меньше определенного значения, коэффициент 1,01 используется в качестве ускорения. Когда это больше, чем определенное значение, коэффициент замедления составляет 0,99 для замедления. Установите отрицательное число как значение замедления (то есть переменная TMP), а затем получите значение в отрицательном 360 (то есть переменная M), и когда оно больше, чем это значение, поворотный столик останавливается.
Кода -копия выглядит следующим образом:
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 (таймер);
MSG (M);
}
run (tmp);
}
иначе if (i> 1000) {
i = i + 45;
run (i);
}
еще {
i = parseint ((i + 1) * 1.01);
run (i);
}
}, 50);
Начните лотерею и сбросьте лотерею
Кода -копия выглядит следующим образом:
<input id = "test" type = "кнопка" value = "удача рисунка" />
<input id = "перезапустить" style = "display: none;" type = "button" value = "Draw Again" />
m $ ('test'). onclick = function () {
m $ ('test'). style.display = "нет";
showmsg ();
}
m $ ('перезапуск'). onclick = function () {
m $ ('перезапуск'). style.display = "none";
if (isie) {
m $ ("Демо"). Style.top = "0px";
m $ ("Демо"). Style.left = "0px";
} else if (m $ ("demo"). style.moztransform! == undefined) {
m $ ("demo"). style.moztransform = 'utate (0deg)';
} else if (m $ ("demo"). style.otransform! == undefined) {
m $ ("demo"). style.otransform = 'utate (0deg)';
} else if (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("demo"). style.webkittransform = 'utate (0deg)';
} еще {
m $ ("demo"). style.transform = 'utate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
2. Полная демонстрация кода:
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<Title> лотерея лотереи </title>
<стиль типа = "text/css">
#container {width: 400px; высота: 400px; положение: относительно; маржа: 0 auto;}
#demo {position: Absolute; Filter: Progid: dximagetransform.microsoft.matrix (sizingmethod = "Auto Expand");}
</style>
</head>
<Стиль тела = "Высота: 1000px;">
<div id = "контейнер">
<div id = "demo">
<img src = "// files.vevb.com/file_images/article/201406/20146394819279.png"/>
</div>
</div>
<input id = "test" type = "кнопка" value = "удача рисунка" />
<input id = "перезапустить" style = "display: none;" type = "button" value = "Draw Again" />
<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) {
target = m $ (target);
var gorges = target.clientWidth, orginh = target.clientHeight;
ClearInterval (таймер);
функция запустить (угол) {
if (isie) {
cosdeg = math.cos (angel * math.pi / 180);
sindeg = math.sin (angel * math.pi / 180);
с (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.mogransform = "utate (" + angel + "deg)";
} else if (target.style.otransform! == undefined) {
target.style.otransform = "utate (" + angel + "deg)";
} else if (target.style.webkittransform! == undefined) {
target.style.webkittransform = "utate (" + angel + "deg)";
} еще {
target.style.transform = "utate (" + angel + "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 (таймер);
MSG (M);
}
run (tmp);
}
иначе if (i> 1000) {
i = i + 45;
run (i);
}
еще {
i = parseint ((i + 1) * 1.01);
run (i);
}
}, 50);
}
вернуть {utate: rowate}
} ();
функция showmsg () {
mrotate.rotate ("demo", функция 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 += "4444444";
}
else if (m> -270 && m <-210) {
m $ ("msg"). innerhtml += "55555555";
}
else if (m> -330 && m <-270) {
m $ ("msg"). innerhtml += "66666666";
} еще {
m $ ("msg"). innerhtml += "1111111111";
}
m $ ('перезапуск'). style.display = "block";
});
}
window.onload = function () {
m $ ('test'). onclick = function () {
m $ ('test'). style.display = "нет";
showmsg ();
}
m $ ('перезапуск'). onclick = function () {
m $ ('перезапуск'). style.display = "none";
if (isie) {
m $ ("Демо"). Style.top = "0px";
m $ ("Демо"). Style.left = "0px";
} else if (m $ ("demo"). style.moztransform! == undefined) {
m $ ("demo"). style.moztransform = 'utate (0deg)';
} else if (m $ ("demo"). style.otransform! == undefined) {
m $ ("demo"). style.otransform = 'utate (0deg)';
} else if (m $ ("demo"). style.webkittransform! == undefined) {
m $ ("demo"). style.webkittransform = 'utate (0deg)';
} еще {
m $ ("demo"). style.transform = 'utate (0deg)';
}
m $ ('test'). style.display = "block";
i = 0;
}
}
</script>
</body>
</html>