VPF::Покадровая прокрутка - Форум программистов

aEk

Дата 21.9.2006, 11:38 (ссылка)

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

Загрузка ...

Новичок

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

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

Подскажите плиз как реализовать идею покадровой прокрутки изображений...

Т.е. есть последовательный набор картинок. Есть один элемент <img src="..." id="...">, в котором должен меняться src - если на области этой картинки с нажатой левой кнопкой мыши юзер двигает влево, то src сменяется на предшествующие кадры. Если вправо, то соотвественно на последующие.

Sardar

Дата 21.9.2006, 12:49 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Здесь о кнопках мыши.

Ну а document.getElementById("image_id").src = <следующая | предидущая> должно быть ясно, если нет, то в поиск "new Image".

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

aEk

Дата 25.9.2006, 16:42 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(Sardar @ 21.9.2006, 12:49

)

Здесь о кнопках мыши.

здесь не все просто....

Цитата(Sardar @ 21.9.2006, 12:49

)

Ну а document.getElementById("image_id").src = <следующая | предидущая> должно быть ясно, если нет, то в поиск "new Image".

ну тут вроде бы затруднений особых нет

Добавлено @ 16:56

Цитата(Sardar @ 21.9.2006, 12:49)

Вот что у меня пока получилось...

Цель у меня сделать так, чтобы обработчик onmousemove (при нажатой левой кнопке) в конечном итоге позволял "прокручивать" кадры влево или вправо в зависимости от того, куда юзер тащит мышью.

Полученный код работает в опере (7.23), ie (6.0). В fire fox (1.0.4) работать не хочет, посокльку там срабатывает drag'n'drop.
В Slide() я использую document.getElementById('im').setCapture(0). Как я понимаю, ff это не понимает...

Подскажите, что тут можно сделать...

Код


var  frame=10;  //число кадров
var step=1; // текущий кадр
var button_down=0;
var previous_X=-1;
var im = new Array();

function prepare()
{      for(i=1;i<=frame;i++)
    {    im[i] = new Image();    
         im[i].src = "http://localhost/pictures/test/"+i+".jpg";                    
    }    
}

function getNextStep(direct)
{
    if(direct=='r')    step++;
    if(direct=='l')    step--;
    
    if(step>frame) step=1;
    if(step<1) step=frame;
    
    return step;

}

function right()    {    document.images[0].src = im[getNextStep('r')].src;        }
function left()        {    document.images[0].src = im[getNextStep('l')].src;        }    

function MouseButton(stat)
{   button_down=stat;
    previous_X=-1;
}

function Slide()    // здесь определяем , в  какую сторону пользователь прокручивает кадры и соотвественно меняем кадры
{        
        x=getX();        
        
        if(button_down==1 && previous_X!=-1)
        {    
            diff=previous_X-x;            
            
            for(i=0;i<Math.abs(diff);i++)
            {   if(diff>0)                document.images[0].src = im[getNextStep('l')].src;
                else                        document.images[0].src = im[getNextStep('r')].src;                

                document.getElementById('im').setCapture(0);// drag'n'drop нам не нужен
            }

        }
        previous_X=x;
}

function getX(e)
{    return event.clientX; }

function MouseOut()
{        button_down=0;
        previous_X=-1;
        document.getElementById("im").style.cursor='default';
}

Код


<body onLoad="prepare();">
<div align="center">
<img src="http://localhost/pictures/test/1.jpg" id="im" border="0" onMouseOver="if((event.srcElement? event.srcElement: event.target)==this){this.style.cursor='w-resize';}" onMouseMove="Slide();" onMouseUp="if((event.srcElement? event.srcElement: event.target)==this){MouseButton(0);}" onMouseDown="if((event.srcElement? event.srcElement: event.target)==this){MouseButton(1);}" onMouseOut="if((event.srcElement? event.srcElement: event.target)==this){MouseOut();}"> </a>
<p><span onClick="left();" onMouseOver="this.style.cursor='hand';">Left</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span onClick="right();" onMouseOver="this.style.cursor='hand';">Right</span></p>

</div>
</body>

Sardar

Дата 25.9.2006, 21:56 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(aEk @ 25.9.2006, 15:42

)

В fire fox (1.0.4) работать не хочет, посокльку там срабатывает drag'n'drop.

Нет, он не срабатывает потому что getX() обращаеться к глобальному event, который только в ИЕ (и в Опере для совместимости) существует, сей обьект не являеться стандартным. По onmousemove вызывай Slide(event) - т.е. явно передавай обьект-событие, в самом Slide замени getX(), на ev.clientX, ev естественно должно быть параметром Slide.

Должно работать на первый взгляд.

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

aEk

Дата 26.9.2006, 08:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(Sardar @ 25.9.2006, 21:56

)

Нет, он не срабатывает потому что getX() обращаеться к глобальному event, который только в ИЕ (и в Опере для совместимости) существует, сей обьект не являеться стандартным. По onmousemove вызывай Slide(event) - т.е. явно передавай обьект-событие, в самом Slide замени getX(), на ev.clientX, ev естественно должно быть параметром Slide.

Вот подправил:

Код


var  frame=10;  //число кадров
var step=1; // текущий кадр
var button_down=0;
var previous_X=-1;
var im = new Array();
function prepare()
{      for(i=1;i<=frame;i++)
    {    im[i] = new Image();    
         im[i].src = "http://localhost/pictures/test/"+i+".jpg";                    
    }    
}
function getNextStep(direct)
{
    if(direct=='r')    step++;
    if(direct=='l')    step--;
    
    if(step>frame) step=1;
    if(step<1) step=frame;
    
    return step;
}
function right()    {    document.images[0].src = im[getNextStep('r')].src;        }
function left()        {    document.images[0].src = im[getNextStep('l')].src;        }    
function MouseButton(stat)
{   button_down=stat;
    previous_X=-1;
}
function Slide(evt)    // здесь определяем , в  какую сторону пользователь прокручивает кадры и соотвественно меняем кадры
{        x=evt.clientX;
        
        if(button_down==1 && previous_X!=-1)
        {    
            diff=previous_X-x;            
            
            for(i=0;i<Math.abs(diff);i++)
            {   if(diff>0)                document.images[0].src = im[getNextStep('l')].src;
                else                        document.images[0].src = im[getNextStep('r')].src;                
                document.getElementById('im').setCapture(0);// drag'n'drop нам не нужен
            }
        }
        previous_X=x;
}

function MouseOut()
{        button_down=0;
        previous_X=-1;
        document.getElementById("im").style.cursor='default';
}

Код


<body onLoad="prepare();">
<div align="center">
<img src="http://localhost/pictures/test/1.jpg" id="im" border="0" onMouseOver="if((event.srcElement? event.srcElement: event.target)==this){this.style.cursor='w-resize';}" onMouseMove="Slide(event);" onMouseUp="if((event.srcElement? event.srcElement: event.target)==this){MouseButton(0);}" onMouseDown="if((event.srcElement? event.srcElement: event.target)==this){MouseButton(1);}" onMouseOut="if((event.srcElement? event.srcElement: event.target)==this){MouseOut();}"> </a>
<p><span onClick="left();" onMouseOver="this.style.cursor='hand';">Left</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span onClick="right();" onMouseOver="this.style.cursor='hand';">Right</span></p>
</div>
</body>

Но делу эту не помогло. Т.к. при перетаскивании картинки курсор меняется на not-allowed (перечеркнутый круг). Так что все-таки ff считает это как drag'n'drop.

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