| рони | 21.12.2015 00:25 |
Deff,
Рулетка горизонтальная
Добрый день, не понимаю как написать скрипт рулетки. До этого связывался только с элементами дизайна.
Выглядеть должна вот так: http://i.imgur.com/o0UK8T8.png Находил у вас на форуме подобное решение http://jsfiddle.net/rwsj9bdo/ Но не разобрался как поставить там два цвета. Помогите пожалуйста. |
aakazancev,
Объясните метод формирование строки с картинками цифр (ну про выбранную ячейку понятно, а каким макаром цифры её окружающие формировать ? (Почему не взять обычное поле http://cs10286.vk.me/u25872104/-14/x_40a08fc6.jpg ?) Ну или создайте сами все варианты картинок для каждого из 37 вариантов (тады скрипт пять строк Или цифры окружения выпавшей цифры произвольные ? (Тады всякие октеты и дюжины и т.д. - не учитываются ?) |
Рядом цифры рандомно, от 0 до 36.
Поле уже готово, осталось только сделать саму рулетку, она не круглая как обычно а имеет вот такой горизонтальный вид. Там всего лишь три цвета, 0 - зеленый, и остальные красный и черный. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex">
<title> - jsFiddle demo</title>
<script src='https://code.jquery.com/jquery-1.11.0.js'></script>
<style type='text/css'>
li{
margin: 0px;
width: 60px; height:50px;
display: inline-block;
text-align: center;
color: rgba(255, 255, 255, 1);
font-size: 24px;
font-weight: bold;
}
#carusel {
position:relative; top: 0px; left:0px; display:block;
width: 60px; height:70px;
padding: 0px; margin: 0px;
}
.divv{
overflow:hidden; width: 540px; height:50px; position: relative; left: 100px
}
#carusel li{
border-radius: 50%;
line-height: 50px;
}
</style>
</head>
<body>
<div class="divv">
<ul id="carusel">
</ul>
</div>
<p></p>
<input name="" type="button" value="go">
<script>
$(function () {
function random(min,max,l)
{var arr = [],m = [],n = 0;
if (max - min < l-1) return;
for (var i=0; i<=(max-min); i++)m[i] = i + min;
for (var i=0; i<l; i++) {n = Math.floor(Math.random()*(m.length)); arr[i]=m.splice(n,1)[0];};
return arr
}
var arr = random(0,36,37), carusel = $('#carusel');
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
}
$.each(arr,function(indx, el){
$('<li/>',{text : el, data : {i : el},css : {'background-color' : el ? el%2 ? 'red' : 'black' : 'green'},color : el ? 'white' : 'black'}).appendTo(carusel)
carusel.width('+=60')
});
function lotto()
{
var n = rand(0 ,arr.length, true);
r = rand(2 ,5, true);
carusel.stop();
(function go() {
carusel.animate({
left: '-=50'
}, 100, function () {
var li = $('li:first');
data = $('#carusel>li:eq(5)').data('i');
if (data == n) r--;
li.appendTo(carusel)
carusel.css({
left: '0px'
});
r && go();
if(!r) {$('#carusel>li:eq(4)').css({"border":"#86B817 3px solid"});
}
})
}())
}
$('[type="button"]').on({click : lotto})
})
</script>
</body>
</html>
|
Ну и после остановки добавить:
$('#carusel>li:eq(4)').css({"border":"#86B817 3px solid"}); ============ // :( Плюсы не ставяцо ... |
http://codepen.io/Kazancev/pen/YwqgJy
Огромное спасибо, а теперь вопрос, как сделать чтобы не по кнопке запускалась, а допустим с интервалом в 30 секунд - сама? И подскажите как быть, если мне надо будет цвета расставлять не рандомно, а на каждое число определенный цвет? Еще это все сделать плавнее и с замедлением при остановке |
Cм Спойлер;
<!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(http://savepic.su/6852527.png) 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(http://s6.uploads.ru/t/DilLG.png) 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(http://s7.uploads.ru/t/nyGac.png) 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>
Для автозапуска мон убрать кнопку и вместо красного: $('[type="button"]').click(RestarRound); Поставить такие строки: setTimeout('RestarRound',2100); setInterval('RestarRound',30000); Хотя наверно понадобится кнопка сброса и при втором клике - перезапуска. Ибо иногда хочется отвлечься |
Deff,
интересно конечно, но похоже работает нормально в Mozilla Firefox только. |
рони,
Ни наю, в опере и Гуголхроме и яндексе у меня работает Чичас удлиню задержку для инициализации // setTimeout(function(){ $('.round:last').css({'left':'-'+(65*175)+'px'});},2000); Попробуй чичас |
Deff,
|
| Часовой пояс GMT +3, время: 05:11. |