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