使用javascript onclick更改图像源
[英]change image source using javascript onclick with effect
问题描述
我想用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>
4 个解决方案
解决方案1
2 已采纳 2015-07-01 06:59:58
是的，淡出它，另一个图像出现...不需要任何优雅的效果，甚至简单的淡入淡出或幻灯片都可以。有任何演示可用
好吧，结果必须像一个图像轮播，点击它应该保持淡入
尝试利用.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>
解决方案2
0 2015-07-01 06:51:23
通过：@kmsdev说“你应该考虑使用更新版本的jQuery”
我建议你也使用CSS3的强大功能
$(function(){
$("input:button").click(function(){
$(".cat").css("filter","blur(6px)");
});
});
当您可以浏览这些链接时：
解决方案3
0 2015-07-01 06:58:01
像这样的东西？ jQuery的.each()遍历具有特定类的所有元素。 .attr()更改属性，在本例中为src 。
参考文献：
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">
解决方案4
0 2015-07-01 08:48:15
在显示图像之前，先前的示例错过了在图像准备好（加载）时的监听。
如果你想要一个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浏览器添加前缀
如何在 html 和 javascript 上使用 onclick 多次更改图像源
[英]how to change an image source more than once using onclick on html and javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.