2

我有一个生成随机数的脚本，以便当 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";

      }

这一切都很好，但是当图像发生变化时，它只是“出现”。我想知道是否有任何方法可以让它从一个褪色到另一个？我在网上找到的所有内容都在讨论为每个单独的图像设置样式，但是当我使用这个随机数脚本来获取我的图像时，我想不出一种方法来适应这些解决方案中的任何一个。

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

4

3 回答 3

3

我将为您提供一个使用CSS3 过渡的示例。您可以针对您的具体情况进行调整和改进。

我的具体示例仅适用于编写的 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);
    });
});

在这里你可以看到它。

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

其中最复杂和被忽视的部分是图像预加载。因为，除非您预加载所有要使用的图像，否则动画将不会流畅。但与此同时，检测何时加载图像并不是一件容易的事，而且我使用的方法是一种幼稚的方法，对于浏览器缓存中的图像很可能会失败。这个我就不多说了，大家可以搜搜。

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

于 2013-01-05T00:34:55.190 回答
0

这太长了，无法发表评论，但希望它能引导您朝着正确的方向前进。

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

然后，您需要设置src顶部图像（您要淡入的图像）并使用 CSS 隐藏此图像，否则您的图像将在您设置src.

opacity然后，您将希望通过设置图像的 直到它的 100逐渐淡入顶部图像...

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

更新：如果您有 jQuery，这是您的脚本可能看起来的基本示例：http: //jsfiddle.net/tracyfu/W9wMh/如果您仅限于纯 JS，这里的一些其他解决方案可能会更好。

于 2013-01-05T00:04:58.243 回答
0

这可以使用 jQuery 之类的库最轻松地完成，但这里有一个 jsFiddle 示例。我使用绝对定位将两个图像放置在彼此的顶部，并将其中一个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（我使用本教程中的其他功能）：

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');
}
于 2013-01-05T00:23:50.457 回答