javascript - 使用javascript onclick更改图像源效果-6ren

javascript - 使用javascript onclick更改图像源效果

转载作者：搜寻专家更新时间：2023-10-31 08:43:43

我想用 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>

最佳答案

yea,fade it and another image comes up...neednt be any classy effects,even simple fade or slide would do.Is there any demo available

ok,the result must be like an image carousel,on click it should keep fading in

尝试使用 .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>

关于javascript - 使用javascript onclick更改图像源效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31154225/

文章推荐： javascript - 为分层图像创建可动画的径向蒙版？

文章推荐： javascript - 在 Iframe 页面中添加/更改 css

文章推荐： javascript - HTML 选择列表中选项的样式部分 (

首页

博学

6Ren·AI

商城

javascript - 使用javascript onclick更改图像源效果