228,
учите css |
рони,
все получилось ... http://jsfiddle.net/rwsj9bdo/ |
228,
:dance: |
было бы интересно увидеть на каком этапе вы сейчас) очень заинтересовала работа)
|
Помогите плиз, кому не жалко 5 минут времени, сделайте уже то что мне нужно, ото я 3 часа пытался сделать, но не получается.
1. Мне нужно чтобы случайное число я мог писать через php. То есть чтобы крутилка, выдавала нужный мне вариант. 2. Нужно чтобы Победный вариант, был по середине других вариантов. То есть к примеру, 3 других варианта с право и лево. 3. Нужно чтобы я мог в место цифр, вставлять картинки. То что тут написано, я пробовал, но у меня в место цифр, ссылки на картинки не катят ;) Там нужно как то по другому, но я не шарю. Последний вариант, наиболее подходящий. Я его пытался изменить под то что мне нужно. http://jsfiddle.net/rwsj9bdo/ Ещё вариант, уже готовый, но я не шарю :) Хотел убрать всё лишнее, чтобы можно было просто использовать сам эффект. <div class="row" id="roulette"> <div class="col-md-12 text-center"> <div class="slider-wrap"> <div class="fix"></div> <div class="carousel-body"> <ul id="carousel"> <li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/51675254.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/92272003.png" alt="#"></li> <li><img src="./ruletca_files/r-img3.png" alt="#"></li> <li><img src="./ruletca_files/r-img4.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> <li><img src="./ruletca_files/r-img3.png" alt="#"></li> <li><img src="./ruletca_files/r-img6.png" alt="#"></li> <li><img src="./ruletca_files/r-img7.png" alt="#"></li> <li><img src="./ruletca_files/r-img9.png" alt="#"></li> <li><img src="http://img-host.ucoz.com/_bd/2/94140269.png" alt="#"></li> </ul> </div> </div> </div> </div> <div class="row" id="error_msg" style="display: none;"> <div class="col-md-6 col-sm-8 col-xs-12 col-md-offset-3 col-sm-offset-2 col-xs-offset-0"> <div id="error_message" class="error">Ошибка!</div> </div> </div> <div class="row" id="btn"> <div class="col-md-12 text-center"><button class="spinn" onclick="roulette.run();">Крутить</button></div> </div> .fix { position: absolute; content: ''; background: url([url]http://img-host.ucoz.com/_bd/2/79291116.png[/url]) center top no-repeat; width: 29px; height: 179px; bottom: -20px; left: 50%; margin-left: -15px; z-index: 30; } .slider-wrap .carousel-body, .slider-wrap #carousel { list-style: none; overflow: hidden; position: relative; left: 0px; white-space: nowrap; } .slider-wrap ul { list-style: none; overflow: hidden; position: relative; left: 0px; white-space: nowrap; } .slider-wrap li{ position: relative; border: 1px solid #fdbf03; height: 100px; border-radius: 50%; text-align: center; width: 100px; display: inline-block; margin: 0px 6px; } .slider-wrap li img{ display: block; position: absolute; bottom: 50%; margin-bottom: -20px; right: 50%; margin-right: -40px; width: 80px; height: 40px; } .roulette .spinn{ display: inline-block; border: none; outline: none; background-color: #fdbf03; color: #fff; font-size: 16px; padding: 21px 98px; border-radius: 45px; -webkit-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); -moz-box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); box-shadow: 0px 0px 101px -7px rgba(253,191,3,0.56); transition: 0.5s; margin-bottom: 60px; } .roulette .spinn:hover{ background-color: #fdb903; -webkit-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); -moz-box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); box-shadow: 0px 0px 121px -7px rgba(253,191,3,1); } .r-inf{ display: inline-block; padding-left: 45px; color: #666 !important; position: relative; font-size: 14px; margin-left: 35px; margin-bottom: 50px; } .r-inf:before{ position: absolute; content: ''; left: 0; top: 50%; margin-top: -16px; background-color: #000; width: 31px; height: 31px; border-radius: 50%; } .roulette .left:after{ position: absolute; content: '\f129'; left: 12px; top: 0; font-family: 'FontAwesome'; font-size: 14px; color: #fff; } .roulette .right:after{ position: absolute; content: '\f03a'; left: 8px; top: 0; font-family: 'FontAwesome'; font-size: 14px; color: #fff; } .error{ display: block; text-align: center; font-size: 16px; color: #fff; background-color: #ffa4a4; border-radius: 30px; margin-bottom: 75px; position: relative; padding: 20px 0 17px; } .error:before{ position: absolute; content: '\f071'; font-family: 'FontAwesome'; font-size: 16px; color: #c53852; left: 7%; top: 50%; margin-top: -6px; } var active = true; var running = false; $(window).blur(function () { active = false; }); $(window).focus(function () { active = true; }); var REDIRECT_URL = '/roulette-win.php'; function runRoulette() { if (!running) { running = true; var audio = new Audio('/roulette/case_scroll.wav'); var slot_width = $('.item').outerWidth(true); var offset = slot_width * Math.min(Math.max(Math.random(), .2), .8); var startPos = parseInt($('#carousel').css('margin-left')) - 120; var position = 0; var interval = setInterval(function () { var start_offset = parseInt($('#carousel').css('margin-left')) - startPos + 3; var cPosition = Math.floor(start_offset / (slot_width + 6)); if (cPosition != position && cPosition < 0) { position = cPosition; if (active) { audio.pause(); audio.currentTime = 0; audio.volume = 0.25; audio.play(); } } }, 10); var leftOffset = $('#carousel').find('li[win="1"]').offset().left; var splitterOffset = $('.fix').offset().left; $('#carousel').animate({'margin-left': '-=' + (leftOffset - splitterOffset + offset)}, 10000, 'easeOutCubic', function () { if (interval) clearInterval(interval); setTimeout(function() { $("#winblock").show(); $("#miniprofile").fadeOut(); $("#roulette").fadeOut(); $("#btn").fadeOut(); }, 400) }); } } var exec = 0, roulette = { run: function() { $("#error_msg").hide(); if(!running) { $.ajax({ url: "/roulette/ajax.php", type: "POST", data: {ajax: true}, success: function (data) { console.log(data); data = $.parseJSON(data); switch(data.status) { case 'error': console.log(data.error); $("#error_msg").show(); $("#error_message").html(data.error); break; case 'success': $("#balance").html(parseInt($("#balance").text()) - data.price); $("#carousel").html(""); var winner = ""; for(var i = 0; i < 37; i++) { if(data.items[i].winner == true) { winner = 'win="1"'; $("#what_win_img").attr("src", data.items[i].item_img); $("#what_win").html(data.items[i].item_name); } else { winner = ""; } $("#carousel").append('<li class="item" '+ winner +'><img src="'+ data.items[i].item_img +'" alt="'+ data.items[i].item_name +'"></li>'); } runRoulette(); break; } } }); } console.log("Error: Игра уже идёт!"); } }; Вариант который я скинул, если его кто то настроит просто под эффект, который можно будет использовать. То я буду благодарен. |
Цитата:
создаете массив со ссылками например arr2 = ['http://mashina.png', 'http://babki.png', 'http://stvol.png', 'http://telka.png'] после 'background-color': rgbColor(), вставляете сроку 'background-image': 'url('+arr2[indx]+')' и все работает. или если картинки под цифрами и массив не нужен. |
это я про http://jsfiddle.net/rwsj9bdo/
|
|
А как сохранить на компьютер, чтобы всё работала как должно.
На сайте я вот так вот сделал, всё работает. Цитата:
Цитата:
|
Бикбай,
надо загрузить jquery вначале <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
Часовой пояс GMT +3, время: 11:37. |