Question

我有一个生成随机数的脚本，以便在setImg（）时生成;被称为随机选择的图像出现：

<img src="" id="imgRand" alt="">


      function setImg(){
          var numRand = Math.floor(Math.random()*(6 - 1 + 1)) + 1;
          document.getElementById("imgRand").src = "images/"+numRand+".jpg";

      }

这一切都很好，但是当图像发生变化时，它就会“出现”。我想知道是否有办法让它从一个淡出到另一个？我在网上找到的所有内容都谈到了在每个单独的图像上设置样式，但是当我使用这个随机数字脚本来获取我的图像时，我无法想出一种方法来适应任何这些解决方案。

非常感谢任何帮助，谢谢！

Answer 1

我将使用CSS3 transitions为您提供示例。您可以根据具体情况进行调整和改进。

我的具体示例仅适用于自implementation of the transcription end callback is vendor dependent以来编写的Webkit。您可以使用正确的供应商事件处理程序名称来解决此问题。

/* Fades an element to given opacity */
var fade = function(opacity, fn) {
    this.addEventListener("webkitTransitionEnd", function end() {
        this.removeEventListener("webkitTransitionEnd", end);
        fn && fn.call(this);
    }, false);
    this.style.opacity = opacity;
};

/* Preloads an image */
var load = function(src, fn) {
    var self = this, $img = new Image();
    $img.onload = function() {
        fn && fn.call(self);
    };
    $img.src = src;
};

/* Steps:
 *   1. Fades out current image.
 *   2. Preloads next image.
 *   3. When loading of next image is complete, sets next image.
 *   4. Fades in.
 */
var $img = document.getElementById("imgRand");
/* Fades out */
fade.call($img, 0, function() {
    /* Get random dimensions */
    var height = Math.ceil(Math.random() * 100) + 100;
    var width = Math.ceil(Math.random() * 200) + 100;
    var src = "http://placehold.it/" + width + "x" + height;
    /* Preloading */
    load.call(this, src, function() {
        $img.setAttribute("src", src);
        /* Fades in */
        fade.call($img, 1);
    });
});

You can see it here.

img元素的-webkit-transition-duration样式属性设置为1s。

最复杂且被忽视的部分是图像预加载。因为，除非您预先加载要使用的所有图像，否则动画将不会平滑。但同时检测图像加载的时间并不是一件容易的事，我使用的方法很简单，很可能会在浏览器的缓存中失败。我不会详细介绍，你可以搜索它。

免责声明：这太晚了。所以，我将在这里转储代码，稍后再进行讨论。如果有疑问。

Answer 2

这太长了，无法发表评论，但希望它会引导你朝着正确的方向发展。

因此，因为您每次调用imgRand 替换 setImg的src，所以您尝试交叉渐变的两个图片将不会出现在DOM中同时进行。您可能需要使用CSS将两个单独的图像标记堆叠在一起。

然后，您需要在顶部图片（您要淡入的图片）上设置src并使用CSS隐藏此图片，否则只要您设置{{{ 1}}。

然后，您需要通过设置图像的src逐渐淡化顶部图像，直到它为100 ...

很抱歉这样一个疯狂的描述，但如果你有jQuery可用它可能会容易得多。我将去寻找一个例子并更新它。

更新：如果你有jQuery，这是你的脚本可能是什么样子的基本例子：http://jsfiddle.net/tracyfu/W9wMh/如果你只局限于JS，那么其他一些解决方案可能会更好。

Answer 3

使用诸如jQuery之类的库可以最轻松地完成此操作，但here is a jsFiddle example。我使用绝对定位将两个图像放在彼此的顶部，并给它们中的一个opacity为0.然后我只是在两者之间切换，并使用辅助函数淡入一进一出。

html看起来像这样：

<div id="imageHolder">
    <img id="imgRand0" src="http://placehold.it/100x100" />
    <img id="imgRand1" src="http://placehold.it/100x100" style="opacity:0;alpha(opacity:0);"/>
</div>

<button onclick="setImg()">New Image</button>

CSS：

img {
    position:absolute;
    top:0;
    left:0;
}
#imageHolder {
    position:relative;
    height:100px;
}

javascript（我使用this tutorial中的其他功能）：

var counter = 0;
function setImg(){
    var numRand = Math.floor(Math.random()*6) + 1;
    //document.getElementById("imgRand").src = "images/"+numRand+".jpg";

    counter = (counter + 1) % 2;

    document.getElementById("imgRand" + counter).src = "http://placehold.it/100&text=" + numRand;
    fade('imgRand0');
    fade('imgRand1');
}

如何使图像淡入过渡？

3 个答案: