Question

Html和Javascript代码：

<img  src="imgs/right.gif" id="image_change" onclick="changeImage()"/>

<script>
    function changeImage() {
var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/")+1);
    if  (imgsrc == "left.gif")
    {
        document.getElementById("image_change").src = "imgs/right.gif";
        alert('if'+document.getElementById("image_change").src);
    }
    else 
    {
        document.getElementById("image_change").src = "imgs/left.gif";
        alert('else'+document.getElementById("image_change").src);
    }

}
</script>

当我点击图像时，一个新图像正在以毫秒为单位进行替换。我可以通过使用javascript或添加任何css类来使图像替换速度慢吗？任何帮助都将受到赞赏。

Answer 1

试试这个

使用javascript

   var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        alert("here");
    }, 10);
    var img =document.getElementById("image_change");
    fade(img);// Chnage image in fade method

使用jquery

// increase the 500 to larger values to increase the duration 
// of the fadeout and/or fadein
$('#image_change').fadeOut(500, function () {
    $('#image_change').attr("src", "/newImage.png");
    $('#image_change').fadeIn(500);
});

Answer 2

上面的jQuery方式很简单，如果你想在vanilla JavaScript中使用这个，可以使用不透明度的setTimeout来创建淡出和淡入效果，以便进一步查看下面的链接

Pure JavaScript fade in function

Answer 3

你可以这样做：

function changeImage() {
  setTimeout(function() {
    var src = document.getElementById("image_change").src;
    if (src == "http://s25.postimg.org/iyly1k3uz/arrow_left.png") {
      document.getElementById("image_change").src = "http://s25.postimg.org/tzh36kw3v/arrow_right.png";
    } else {
      document.getElementById("image_change").src = "http://s25.postimg.org/iyly1k3uz/arrow_left.png";
    }
  }, 1000);
}

body {
  background-color: lightblue;
}

<img src="http://s25.postimg.org/tzh36kw3v/arrow_right.png" id="image_change" onclick="changeImage()" />

Answer 4

您可以使用window对象的setTimeout()函数来延迟执行代码。

试试这个：

HTML：

<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />

javaScript：

function changeImage() {
    var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/") + 1);
    if  (imgsrc == "Cartoon-6.jpg")
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
        //alert('if'+document.getElementById("image_change").src);
        }, 1000);
    }
    else 
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
        //alert('else'+document.getElementById("image_change").src);
        }, 1000);
    }

}

jsFiddle

使用javascript进行图像更改onclick非常快？

4 个答案: