VPF::Плавная смена изображений - Форум программистов

PROhvost

Дата 8.6.2007, 14:06 (ссылка)

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

Загрузка ...

Новичок

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

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

Суть такова, нужно сделать так, чтобы при наведении на линк(onmouseover) начиналась плавная смена изображений из 3-4 зараннее подгруженных, а при удалении курсора с линка(onmouseout) смена останавливалась. На данный момент есть вот что:

Код


<script language=JavaScript>


        var m = new Array(0,100);
        var t = new Array();
        
        function next() {
        m[0]+=1;
        m[1]-=1;
        document.getElementById("pic1").style.opacity = m[0]/100;
        document.getElementById("pic1").style.filter="alpha(opacity="+m[1]+")";
        document.getElementById("pic2").style.opacity = m[1]/100;
        document.getElementById("pic2").style.filter="alpha(opacity="+m[0]+")";
        t[0] = setTimeout("next()",5);
        if (m[0]>98) clearTimeout(t[0]);
        return true;
        }

        var mb = new Array(0,100);
        var tb = new Array();
        function back() {
        mb[0]+=1;
        mb[1]-=1;
        document.getElementById("pic1").style.opacity = mb[1]/100;
        document.getElementById("pic1").style.filter="alpha(opacity="+mb[0]+")";
        document.getElementById("pic2").style.opacity = mb[0]/100;
        document.getElementById("pic2").style.filter="alpha(opacity="+mb[1]+")";
        tb[0] = setTimeout("back()",5);
        if (mb[0]>98) clearTimeout(tb[0]);
        }

</script>


<div id="pic1" style="position: absolute; top: 100px; left: 100px;">
<img src="images/1.jpg" />
</div>
<div id="pic2" style="position: absolute; top: 100px; left: 100px; filter: alpha(opacity=0);">
<img src="images/2.jpg" />
</div>
<div onmouseover="next()" onmouseout="back()" style="cursor: pointer;">
тест
</div>

После первого цикла(наведение/удаление курсора с линка) перестает работать фильтр.

Izabela

Дата 8.6.2007, 18:37 (ссылка)

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

Загрузка ...

Шустрый

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

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

PROhvost, вот ....правда картинки изменютса при загрузке....переделаеш....и ещо недоделание кликы на prev и back которие впрчем тебе не нужны

Код


//window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
var mas = new Array("letter.jpg","base.jpg","Add.png");
var pause = false;
var t, next= false;
function so_init() {
    if(!d.getElementById || !d.createElement)return;
    css = d.createElement("link");
    css.setAttribute("href","nadya.css");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    d.getElementsByTagName("head")[0].appendChild(css);
    imgs = d.getElementById("nadya").getElementsByTagName("img");
    var el = document.getElementById("nadya");
 mHTML="";
    for(i=0;i<mas.length;i++){
    mHTML+="<div id=\"image\" name=\"image\" style=\"position:absolute;\"><img src=\"" + mas[i]  +"\"></div>";
    }
    el.innerHTML = mHTML;
    for(i=1;i< mas.length; i++){
    imgs[i].style.display = "none";
    }
    for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    imgs[0].style.display = "block";
    imgs[0].xOpacity = .99;
    t = setTimeout(Fade,1000);
}

function Fade() {
            if (pause)return;
            
            if ( t != 0){
                clearTimeout(t);
                }
            if(next)pause=true;
                   
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;

    nOpacity = imgs[nIndex].xOpacity;
    
    cOpacity-=.05; 
    nOpacity+=.05;
    
    
    
    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
        
        t = setTimeout(Fade,1000);
    } else {
            
        t = setTimeout(Fade,50);
    }
    
                          
}


function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
  
    }

    function doPause(){
pause=true;
}
function Leave(){
    if(pause)
    pause =false;
    t = setTimeout(Fade,1000);
    
}
function prev(){
//cOpacity = imgs[current].xOpacity;
    if(next){
      --nIndex;
    }
        ++ nIndex;
       if(nIndex ==imgs.length)
         {nIndex = 0;}
   
    nOpacity = imgs[nIndex].xOpacity;
  
    
   cOpacity-=.05; 
   nOpacity+=.05; 

    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    
    // nIndex++;
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
    next=false;
       t = setTimeout(prev,1000);
    }else {
            
        t = setTimeout(prev,50);
    }
    
 
}
function back(){
 
     //  cOpacity =0.99;
 if(nIndex == 0){nIndex =imgs.length;}
 --nIndex;


    
  
    cOpacity-=.05; 
    nOpacity+=.05;

    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    
    
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
    } 
    
 nIndex = imgs[nIndex-0]?nIndex-0:(imgs.length-1);
 next= true;
}
//var ell = document.getElementById("next");
//ell.addEventListener?ell.addEventListener("click",so_init,false):ell.attachEvent("onclick",so_init);

//-->
</script>

</head>
<body onload="so_init()">
<div id="tiktak" style="position:relative; overflow:hidden;width:110px; height:120px; border:1px solid red;">
<div  id="nadya" style="position:absolute; 
top:10px; left:0px; width: 200px; height:100px; border:0px solid red;"
onMouseOver="doPause()" onMouseOut="Leave()"></div>
</div>

<input type="button" id="prev" value=">>>>>>>" onClick="prev()"> </input>
<input type="button" id="back" value="<<<<<<<" onClick="back()"></input>
</body>
</html>

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

PROhvost

Дата 9.6.2007, 08:40 (ссылка)

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

Загрузка ...

Новичок

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

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

Спасибо, попробую исправить.

PROhvost

Дата 9.6.2007, 10:35 (ссылка)

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

Загрузка ...

Новичок

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

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

Izabela, в твоем примере фильтр не работает в опере, не могу разобраться как правильно сделать.
Написал так:

Код


<script language=JavaScript>
        var m = new Array(0,100);
        var t = new Array();
        
        function over() {
        m[1]-=1;
        document.getElementById("pic1").style.opacity = m[1]/100;
        document.getElementById("pic1").style.filter="alpha(opacity="+m[1]+")";
        t[0] = setTimeout("over()",5);
        }
        function out() {
        m[0]+=1;
        document.getElementById("pic2").style.opacity = m[0]/100;
        document.getElementById("pic2").style.filter="alpha(opacity="+m[0]+")";
        t[0] = setTimeout("out()",5);
        }
</script>

<div id="pic1" style="position: absolute; left: 100px;">
<img src="images/1.jpg" />
</div>
<div id="pic2" style="position: absolute; left: 100px; filter: alpha(opacity=0); opacity: 0;">
<img src="images/2.jpg" />
</div>

<span onmouseover="over()" onmouseout="out()" style="cursor: pointer;">тест</span>

Но все равно после первого наведения/удаления курсора с линка все перестает работать.

Izabela

Дата 10.6.2007, 11:00 (ссылка)

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

Загрузка ...

Шустрый

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

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

PROhvost, кажется в опере прозрачность не поддерживатса smile

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

Izabela

Дата 10.6.2007, 11:56 (ссылка)

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

Загрузка ...

Шустрый

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

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

PROhvost,

Цитата

Но все равно после первого наведения/удаления курсора с линка все перестает работать.

было б странно если б работало

Код


m[1]-=1;//---то есть "pic1" всегда -1....даже если -число;
 m[0]+=1;// а "pic2"---наоборот ....даже если 4...и 10...

может как то m[1] плюсовый зделаем и ....m[0]--наоборот smile

------------------------------------
the reverse may be true

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

PROhvost

Дата 20.6.2007, 12:51 (ссылка)

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

Загрузка ...

Новичок

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

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

Izabela, Сделал проще с помощью библиотеки. Спасибо за помощь.

з.ы. 9 опера потдерживает опасити.

Это сообщение отредактировал(а) PROhvost - 20.6.2007, 12:53

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