Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 06.11.2015, 18:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

228,
учите css
Ответить с цитированием
  #22 (permalink)  
Старый 06.11.2015, 20:11
228 228 вне форума
Интересующийся
Отправить личное сообщение для 228 Посмотреть профиль Найти все сообщения от 228
 
Регистрация: 31.10.2015
Сообщений: 14

рони,
все получилось ... http://jsfiddle.net/rwsj9bdo/
Ответить с цитированием
  #23 (permalink)  
Старый 06.11.2015, 20:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

228,
Ответить с цитированием
  #24 (permalink)  
Старый 24.12.2015, 19:20
Новичок на форуме
Отправить личное сообщение для TAmada Посмотреть профиль Найти все сообщения от TAmada
 
Регистрация: 24.12.2015
Сообщений: 1

было бы интересно увидеть на каком этапе вы сейчас) очень заинтересовала работа)
Ответить с цитированием
  #25 (permalink)  
Старый 26.05.2017, 21:16
Новичок на форуме
Отправить личное сообщение для Бикбай Посмотреть профиль Найти все сообщения от Бикбай
 
Регистрация: 26.05.2017
Сообщений: 5

Помогите плиз, кому не жалко 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: Игра уже идёт!");
    }
};


Вариант который я скинул, если его кто то настроит просто под эффект, который можно будет использовать. То я буду благодарен.

Последний раз редактировалось Бикбай, 26.05.2017 в 21:32.
Ответить с цитированием
  #26 (permalink)  
Старый 26.05.2017, 23:04
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Бикбай Посмотреть сообщение
3. Нужно чтобы я мог в место цифр, вставлять картинки.
тут проблем нет
создаете массив со ссылками например
arr2 = ['http://mashina.png', 'http://babki.png', 'http://stvol.png', 'http://telka.png']

после
'background-color': rgbColor(),
вставляете сроку
'background-image': 'url('+arr2[indx]+')'

и все работает.
или если картинки под цифрами и массив не нужен.
Ответить с цитированием
  #27 (permalink)  
Старый 26.05.2017, 23:08
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

это я про http://jsfiddle.net/rwsj9bdo/
Ответить с цитированием
  #28 (permalink)  
Старый 26.05.2017, 23:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Бикбай,
http://www.jqueryscript.net/demo/Fan...tte-js/sample/
Ответить с цитированием
  #29 (permalink)  
Старый 27.05.2017, 11:30
Новичок на форуме
Отправить личное сообщение для Бикбай Посмотреть профиль Найти все сообщения от Бикбай
 
Регистрация: 26.05.2017
Сообщений: 5

А как сохранить на компьютер, чтобы всё работала как должно.
На сайте я вот так вот сделал, всё работает.
Цитата:
А на компе вот так:
Цитата:
Ответить с цитированием
  #30 (permalink)  
Старый 27.05.2017, 11:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Бикбай,
надо загрузить jquery вначале
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск