[英]change image source using javascript onclick with effect
I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect. 我想用javascript改变图像的来源,以及像fadeout()或类似的东西。但我需要更改多个图像的源,比如3个图像,具有淡入淡出效果或任何其他效果。 HOW?? 怎么样?? Below is the code i'm using but its only for 2 images how do i use for multiple images: 下面是我正在使用的代码,但它仅用于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 好吧,结果必须像一个图像轮播,点击它应该保持淡入
Try utilizing .fadeToggle()
, .prependTo()
, .show()
to cycle effect of fading out, fading in img
elements within .frame
container 尝试利用.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>
By:@kmsdev say "you should consider to use an updated version of jQuery" 通过:@kmsdev说“你应该考虑使用更新版本的jQuery”
I suggest you also use the power of CSS3 我建议你也使用CSS3的强大功能
$(function(){
$("input:button").click(function(){
$(".cat").css("filter","blur(6px)");
});
});
When you can give a tour of these links: 当您可以浏览这些链接时:
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://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 http://codepen.io/libredesarrollo/full/xIHda
Something like this? 像这样的东西? jQuery's .each()
loops through all elements with a specific class. jQuery的.each()
遍历具有特定类的所有元素。 .attr()
changes attribute, in this case src
. .attr()
更改属性,在本例中为src
。
References: 参考文献:
https://api.jquery.com/each/ https://api.jquery.com/each/
http://api.jquery.com/attr/ http://api.jquery.com/attr/
http://api.jquery.com/animate/ 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">
Previous exemple missed to listen when image is ready (loaded) before display it back. 在显示图像之前,先前的示例错过了在图像准备好(加载)时的监听。
If you want a fadeOut/In: 如果你想要一个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");
}
});
});
If you want a blur, simply change opacity in animate block by : transform: "blur(0px)"
and transform: "blur(10px)"
You may have to add prefix for non-Chrome browsers 如果您想要模糊,只需通过以下方式更改动画块中的不透明度: transform: "blur(0px)"
和transform: "blur(10px)"
您可能需要为非Chrome浏览器添加前缀
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.