Простой JavaScript своп и исчезать / исчезать - PullRequest
Новая
       12

Простой JavaScript своп и исчезать / исчезать

1 голос
/ 06 февраля 2011

Я ищу решение javascript, чтобы просто заставить мое действие SWAP постепенно исчезать, а не просто появляться.

Я хотел бы строго придерживаться некоторого JavaScript вместо использования jquery или любых плагинов.

Вот код, который меняет изображения по щелчку пользователя, просто ищет способ заставить их исчезать и исчезать: 

<script type="text/javascript">
// Image Swap //
function swap(image) {
document.getElementById("main").src = image.href;

}
</script>
<body>
<img id="main" src="image1.png" width="250">
<br>
<a href="image1.png"  onclick="swap(this); return false;"><img width="50" src="/image1.png"></a>
<a href="image2.png" onclick="swap(this); return false;"><img width="50" src="image2.png"></a>f
<a href="image3.png" onclick="swap(this); return false;"><img width="50" src="image3.png"></a>
</body>


РЕДАКТИРОВАТЬ: Я видел и пробовал много разных вариантов JavaScript, но я не могу понять, как соединить его с текущим JavaScript, который я использую выше.В том числе: 

document.write("<style type='text/css'>#main {visibility:hidden;}</style>");

function initImage() {
imageId = 'main';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 10;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}

Ответы [ 2 ]

1 голос
/ 06 февраля 2011

быстрый и грязный : 

function swap (image) {

    var inc = 0.1; // Increment / Decrement
    var timeout = 100;

    var fadeout = window.setInterval ( function () {
        var e = document.getElementById("main");
        var o = parseFloat( e.style.opacity );
        if ( o <= 0 )
            window.clearInterval ( fadeout );
        else
            o = o - inc;
        e.style.opacity = o;
    }, timeout );

    document.getElementById("main").src = image.href;

    var fadein = window.setInterval ( function () {
        var e = document.getElementById("main");
        var o = parseFloat( e.style.opacity );
        if ( o >= 1 )
            window.clearInterval ( fadein );
        else
            o = o + inc;
        e.style.opacity = o;
    }, timeout );

}

Это должно работать во всех последних браузерах. Вы можете настроить качество / скорость с помощью переменных «inc» и «timeout». Обратите внимание, что вместо этого лучше использовать простую инфраструктуру анимации (не обязательно тяжелую jQuery), если вы хотите использовать много анимаций на своем веб-сайте.

Мой пример может привести к проблемам с производительностью, если он используется слишком часто / параллельно на одном веб-сайте. Возможно, вы также захотите передать мои фрагменты 'fadein' и 'fadeout' своим собственным функциям, если вы хотите использовать их более одного раза (не программист копирования и вставки). :)

0 голосов
/ 06 февраля 2011

Вы можете использовать CSS переходы / анимации, чтобы сделать большую работу за вас. Приведенный ниже фрагмент кода работает на бета-версиях Chrome и Firefox 4.0. В IE нет исчезновения. Однажды он будет работать только в IE.

В приведенном ниже примере я размещаю два изображения, абсолютно расположенных в одном и том же div. Для дочерних изображений я указываю 1-секундное затухание при изменении непрозрачности. Функция подкачки просто устанавливает src на изображении, которое не видно, и переключает непрозрачность между 0 и 1.0 для каждого изображения. Один затухающий идентификатор поверх другого затухает.

Теперь, когда вы попробуете это, вы можете заметить, что первый обмен не надежно исчезает. Это потому, что я не дождался события «onload» на изображении, прежде чем изменить прозрачность. Лучше оставить непрозрачность 0.0, затем установить атрибут src. Затем при обратном вызове onload включите прозрачность. 

<head>
    <style>


div#imghost
{
    position:relative;
    height: 100px;
    width: 100px;   
}

div#imghost img
{
 position: absolute;
 left: 0px;
 top: 0px;
 opacity: 0.0;
 -moz-transition-property: opacity;
 -moz-transition-duration: 1s;
 -webkit-transition-property: opacity;
 -webkit-transition-duration: 1s;
  transition-property: opacity;
 transition-duration: 1s;
}

    </style>

    <script type="text/javascript">
    // Image Swap //
        var img1_is_visible = false;

        function swap(img) {
            var img1 = document.getElementById("img1");
            var img2 = document.getElementById("img2");
            var imgold= img1_is_visible ? img1 : img2;
            var imgnew= img1_is_visible ? img2 : img1;

            imgnew.style.opacity = 1.0;
            imgnew.src = img.src;
            imgold.style.opacity = 0.0;
            img1_is_visible = !img1_is_visible
        }

    </script>
</head>

    <body>
     <div class="imghost">
         <img id="img1" />
         <img id="img2" />
     </div>

    <br/>
        <img width="50" src="image1.png" onclick="swap('this');">
        <img width="50" src="image2.png" onclick="swap('this');">
        <img width="50" src="image3.png" onclick="swap('this');">
    </body>
...