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


Автор: aEk 21.9.2006, 11:38
Подскажите плиз как реализовать идею покадровой прокрутки изображений...

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

Автор: Sardar 21.9.2006, 12:49
http://forum.vingrad.ru/index.php?showtopic=32350&view=findpost&p=249513 о кнопках мыши.

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

Автор: aEk 25.9.2006, 16:42
Цитата(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)
http://forum.vingrad.ru/index.php?showtopic=32350&view=findpost&p=249513 о кнопках мыши.

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

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

Цель у меня сделать так, чтобы обработчик  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
Цитата(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
Цитата(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. 

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