Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Картинки как в игровых автоматах.


Автор: Aliance 3.2.2008, 10:47
Не уверен, что реализация того, чего я хочу возможна лишь с помощью JS, но все же.
У меня есть 3 картинки приблизительно равные по ширине и равные по высоте. Картинки располагаются в горизонтальном ряду.
Всего их окола 200, но на главной сайта показываются только 3 в ряд случайным образом. Заказчику захотелось, чтобы они вращались как в игровых автоматах. То есть открываешь сайт - показываются 3 случайных картинки - через заданный таймер они провернулись разок (только не сменились, а именно провернулись) и показались другая случайная их комбинация. Подскажите, как лучше реализовать проворот?

Автор: Dr.Zlo 3.2.2008, 20:29
Я бы реализовал так: показывать картинки как бэкграунды в 3х одинаковых по размерам дивах, эффект проворачивания реализовать с помощью backgroundPosition. В аттаче я приложил пример, там реализовано с помощью jQuery и плагина jQuery.backgroundPosition (http://www.protofunc.com/scripts/jquery/backgroundPosition/), который как раз позволяет корректно анимировать позицию бэкграундов (с помощью стандартных средств jQuery позиция по вертикали анимируется косячно). С помощью этих двух библиотек анимация прописывается одной строчкой:

Код

$('#test_div').animate({'backgroundPosition': '(0px 1000px)'}, 1000)


Если тебе надо заменять картинку после анимации, то нужно что-то вроде:

Код

        $('#test_div').animate({'backgroundPosition': '(0px 900px)'}, 1000, 'linear', function(){
            $('#test_div').css({'backgroundImage': 'url(loading2.gif)', 'backgroundPosition': '(0px 0px)'})
        })


Наверно можно реализовать и без jQuery, но это будет долго и нудно  smile

Автор: Ghirik 4.2.2008, 03:53
А может поиграться с прозрачностью и zIndex-ом? Типа одни картинки плавно становятся полупрозрачными и ползут на места других, восстанавливая прозрачность. Почти анимация... smile

Автор: ksnk 4.2.2008, 10:05
Хм... а такой игровой автомат не пойдет?
Код

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <script>
var oneHeight=80, // размер одного элемента
    numImage=10; // количество элементов

function LetsGo(){
    var x=[];
    for(var i in{xxx1:1,xxx2:1,xxx3:1}){
        x.push({
            a:document.getElementById(i), // this - это HTML контрол с классом XXX
            speed:30+Math.floor(Math.random()*20), // скорость
            scr:Math.floor(Math.random()*oneHeight*numImage) // начальное положение
        });
    }

    var interval=setInterval(
        function (){
            var i = x.length,complete=true;
            while(i--){ var a=x[i];
                a.scr+=a.speed;
                if(a.speed>0){ a.speed-=0.2;complete=false;}
                if(a.scr>(oneHeight*numImage))a.scr-=oneHeight*numImage;
                a.a.scrollTop=Math.floor(a.scr);
            }
            if(complete) clearInterval(interval)
        },20)
}

  </script>
  <style>
  .XXX {width: 70px; height: 100px; border: 1px solid red; overflow:hidden;float:left}
  .X {font-size:70px;width:100%;text-align:center; height:80px;}/* << вот тут 80!!!*/
  </style>
</head>
<body onload='LetsGo()'>

<div id='xxx1' class='XXX'>
<div class='X'>1</div> <!-- а вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<div id='xxx2' class='XXX'>
<div class='X'>1</div> <!-- и вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<div id='xxx3' class='XXX'>
<div class='X'>1</div> <!-- и вот тут - 10 картинок -->
<div class='X'>2</div>
<div class='X'>3</div>
<div class='X'>4</div>
<div class='X'>5</div>
<div class='X'>6</div>
<div class='X'>7</div>
<div class='X'>8</div>
<div class='X'>9</div>
<div class='X'>10</div>
<div class='X'>1</div> <!-- и еще одна, такая-же как первая -->
</div>
<input type='button' onclick='LetsGo()' value='!!!Исчо!!!'>


</div>
</body>
</html>

Автор: Aliance 4.2.2008, 15:22
ksnk, нравится. Спасибо.

Если будут еще кто-либо, кто делал такую реализацию - поделитесь своими успехами/задумками.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)