Question

我正在寻找一个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()}

Answer 1

快速而肮脏：

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'片段外包给它自己的函数，如果你想多次使用它（不要复制和粘贴程序员）。：）

Answer 2

你可以使用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>

简单的javascript交换和淡入/淡出

2 个答案: