Скрлинг или барабан лотереи
Здравствуйте, у меня появилась проблема, хочу понять и сделать такой скрипт, который создает барабан лотереи и останавливается на определенном значение как например : http://easydrop.ru/ http://free.open-case.pro
Пожалуйста, объясните, как реализовать похожую анимацию |
Выбири один из кейсов, там находится рол, когда откроешь кейс, срабатывает js, лотерея
|
Например, таким образом должна выглядеть лотерея, ну это дизайн и уже не важно, не относиться к js, меня интересует, как сделать вращение этого барабана в правую сторону, постепенно замедляясь и останавливаясь на одном предмете, в моем случае (Цифре):
http://hostingkartinok.com/show-imag...5036afe4458307 |
Или как сделать на подобии этого скрипта, чтобы было по горизонтали.
http://jsfiddle.net/orbhxjs3/ |
|
|
Мне нужно сделать так, чтобы было плавное замедление и останавливалась где-то например в начале картинке, или в конце, или по середине, то есть - старт резкий и постепенное замедление
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - Рулетка </title>
<script src='http://code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
#firstBG {
background: transparent url([url]http://savepic.su/6852527.png[/url]) no-repeat 100px top;
}
.round,
.round tr,
.round td {
padding: 0px;
margin: 0px;
border:none 0;
border-collapse:collapse;
}
.round tr {
vertical-align:middle;
text-align:center;
}
.round td {
width:65px;
height:74px;
background:transparent url([url]http://s6.uploads.ru/t/DilLG.png[/url]) center 0 no-repeat;
background-size: 74px auto;
color:#fff;
font: normal normal 700 30px/normal "Courier New";
}
.round td.A0{
background-position:center 0;
}
.round td.A0{background-position:center -0.07%}
.round td.A1{background-position:center 2.5%}
.round td.A2{background-position:center 5%}
.round td.A3{background-position:center 7.5%}
.round td.A4{background-position:center 10%}
.round td.A5{background-position:center 12.5%}
.round td.A6{background-position:center 15%}
.round td.A7{background-position:center 17.5%}
.round td.A8{background-position:center 20%}
.round td.A9{background-position:center 22.5%}
.round td.A10{background-position:center 25%}
.round td.A11{background-position:center 27.5%}
.round td.A12{background-position:center 30%}
.round td.A13{background-position:center 32.5%}
.round td.A14{background-position:center 35%}
.round td.A15{background-position:center 37.5%}
.round td.A16{background-position:center 40%}
.round td.A17{background-position:center 42.5%}
.round td.A18{background-position:center 45%}
.round td.A19{background-position:center 47.55%}
.round td.A20{background-position:center 50%}
.round td.A21{background-position:center 52.5%}
.round td.A22{background-position:center 55%}
.round td.A23{background-position:center 57.55%}
.round td.A24{background-position:center 60%}
.round td.A25{background-position:center 62.5%}
.round td.A26{background-position:center 65%}
.round td.A27{background-position:center 67.5%}
.round td.A28{background-position:center 70%}
.round td.A29{background-position:center 72.5%}
.round td.A30{background-position:center 75.05%}
.round td.A31{background-position:center 77.54%}
.round td.A32{background-position:center 80%}
.round td.A33{background-position:center 82.5%}
.round td.A34{background-position:center 85.06%}
.round td.A35{background-position:center 87.5%}
.round td.A36{background-position:center 90.1%}
.round td.A37{background-position:center 92.5%}
.round td.A38{background-position:center 96%}
.round td.A39{background-position:center 97.5%}
.round td.A40{background-position:center 100%}
.round {
position: relative;
background:#2D3147 url([url]http://s7.uploads.ru/t/nyGac.png[/url]) repeat-x center;
background-size: auto 100%;
margin: auto; left:0; top:0;
transition-property: left;
transition-duration: 16s;
}
.wrap-ruletka{
width: 650px;
height:124px;
overflow-y:hidden;
overflow-x:hidden;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div id=firstBG>
<div class="wrap-ruletka">
<!-- Таблица -->
</div></div>
<p></p>
<input name="" type="button" value="go">
<script>
$(function () {
function indexRandom(lng){
var a = {},i,out=[],n=0;
for(i=0;i<lng;i++)a[i]=i;
while (n!=lng){
i = Math.floor(lng*Math.random());
if(typeof(a[i])!='undefined'){
out.push(a[i]);
delete a[i];
n++;
}
}
return out;
}
var i, arr = [];
for(i=0;i<185;i++)arr.push(i%37); //создали массив включающий 5 подмассивов от 0 до 36;
RestarRound = function(){ $('.round').remove();
var ind = indexRandom(185); //создали массив перемешанных индекстов для массива arr;
var a = '<td class="A';
var b = '"></td>';
var str='<table class=round><tbody><tr></tr></tbody><table>';
$('.wrap-ruletka').append(str); str = '';
//Создаём строки перемешанного массива arr и втыкаем в таблицу ;
for(i=0;i<186;i++){
if(!!i&&!(i%37)){$('.round').css({'width':''+(65*i )+'px'}).find('tr:first').append(str); str = '';}
if(i==180){str+= a + arr[ind[i]]+'"><img src="http://s7.uploads.ru/t/xfyR4.png" width=100% style="margin-bottom:-12px;"></td>';continue;}
if(i==185) break;
str+= a + arr[ind[i]]+b;
}
setTimeout(function(){ $('.round:last').css({'left':'-'+(65*175)+'px'});},1700);
}
$('[type="button"]').click(RestarRound);
})
</script>
</body>
</html>
Как в этом коде поставить определенное значение выигрыша? |
Разобрался, я поменял значение в строке 139:
if(i==180){str+= a + arr[ind[i]]+'"><img src="http://s7.uploads.ru/t/xfyR4.png" width=100% style="margin-bottom:-12px;"></td>';continue;} На if(i==180){str+= a + НОМЕР ВЫИГРЫША+'"><img src="http://s7.uploads.ru/t/xfyR4.png" width=100% style="margin-bottom:-12px;"></td>';continue;} |
| Часовой пояс GMT +3, время: 07:53. |