VPF::Картинки как в игровых автоматах.

Aliance

Дата 3.2.2008, 10:47 (ссылка)

(голосов:1)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Dr.Zlo

Дата 3.2.2008, 20:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 12.11.2007

Репутация: 1
Всего: 2

Я бы реализовал так: показывать картинки как бэкграунды в 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

Присоединённый файл ( Кол-во скачиваний: 6 )

image_Scroll.rar 26,16 Kb

Ghirik

Дата 4.2.2008, 03:53 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

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

--------------------

Отдадим всё клиенту, пускай его машина мучается...

ksnk

Дата 4.2.2008, 10:05 (ссылка)

(голосов:2)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Хм... а такой игровой автомат не пойдет?

Код


<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>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 4.2.2008, 15:22 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

ksnk, нравится. Спасибо.

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »