Question

我想用javascript改变图像的来源，以及像fadeout（）之类的效果或类似的东西。但我需要更改多个图像的来源，比如3个图像，具有淡入淡出效果或任何其他效果如何?? 下面是我使用的代码，但它仅用于2个图像，我如何使用多个图像：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Untitled Document</title>
    <script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
    background:url(big-image.jpg);
    background-size:100% auto;
    background-repeat:no-repeat;
    }
#a{
    width:15%;
    height:25%;

    position:static;
}
#b{
    width:50%;
    height:45%;
    display:none;
    left:10%;
}

</style>
<body>
    <h1>
      <input type="button" value="Click here" />
    </h1>
    <div class="frame">
      <h2 align="center">
         <img src="1.png" width="15%" height="31%" class="cat" id="a">
      </h2>
      <h3 align="center">
         <img src="2.png" id="b" class="cat">
      </h3>
    </div>
  <script type="text/javascript">
  $(function(){
    $("input:button").click(function(){
        $(".cat").fadeToggle("slow");
    });
  });
  </script>
</body>
</html>

Answer 1

是的，淡出它，另一个图像出现......不用任何优雅效果，甚至简单的淡入淡出或滑动都可以。有任何可用的演示

好的，结果必须像图像轮播，点击它应该保留褪色

尝试利用.fadeToggle()，.prependTo()，.show()来消除淡出效果，淡化img容器中的.frame元素

$(function() {
  $("input:button").click(function() {
    $("img:last").fadeToggle("slow", function() {
      $(this).prependTo(".frame").show()
    });
  });
});

.frame {
  position: relative;
  left: 35%;
  width: 150px;
  height: 150px;
}
img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
  <img src="http://lorempixel.com/150/150/cats" />
  <img src="http://lorempixel.com/150/150/technics" />
  <img src="http://lorempixel.com/150/150/nature" />
  <img src="http://lorempixel.com/150/150/animals" />
</div>

Answer 2

通过：@kmsdev说“你应该考虑使用更新版本的jQuery”

我建议你也使用CSS3的强大功能

$(function(){
    $("input:button").click(function(){
        $(".cat").css("filter","blur(6px)");
    });
});

当您可以浏览这些链接时：

http://www.desarrollolibre.net/blog/tema/74/html5-css-js/el-filtro-blur-desenfoque-en-css-y-alguno-de-sus-posibles-usos#.VZOM3e1_NHw

http://codepen.io/libredesarrollo/full/xIHda

Answer 3

这样的东西？ jQuery的.each()循环遍历具有特定类的所有元素。 .attr()更改了属性，在本例中为src。

参考文献：

https://api.jquery.com/each/

http://api.jquery.com/attr/

http://api.jquery.com/animate/

$('button').click(function(){
   $('.image').each(function(){
      $(this).animate({
        opacity: 0
      }, 300, function(){
         $(this).attr('src', 'http://www.spacecitynerd.com/launch/wp-content/uploads/2014/06/gaben.png');
      });
     $(this).animate({
       opacity: 1
     }, 300);
   });
});

img{
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Click me</button><br>
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">
<img src="http://www.indiavision.com/news/images/articles/2013_01/386025/u8_Gabe-Newell.jpg" class="image">

Answer 4

在显示图像之前，图像已准备好（已加载）时，之前的示例错过了侦听。

如果你想要一个fadeOut / In：

// Trigger action on click (or something else)
$("img").on("click", function(){

    // Store element to access it faster
    var $this = $(this);

    // Animate to hide it
    $this.animate({
        opacity: 0
    }, {
        // When completely transparent
        complete: function(){

            // Add load event to know when img is ready (loaded)
            $this.on("load", function(){

                // Show new image
                $this.animate({
                    opacity: 1
                });
            });

            // Set to image to start loading
            $this.attr("src", "newurl");
        }
    });

});

如果您想要模糊，只需通过以下方式更改动画块中的不透明度： transform: "blur(0px)"和transform: "blur(10px)" 您可能需要为非Chrome浏览器添加前缀

使用javascript onclick更改图像源

4 个答案: