首頁猿問有沒有辦法在on.click...

有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？

JavaScript

斯蒂芬大帝 2022-09-23 09:19:48

我是一個新手，我自己學習JavaScript并使用一些資源，但我想自己探索一些東西，因此嘗試這個東西，但由于某種原因它不起作用。感謝您的幫助。目的是通過交換源來澄清一些模糊的圖像。這些圖像被稱為零.jpg/零模糊.jpg，一.jpg/一模糊.jpg等等...頁面加載模糊的圖像源，直到單擊。我想編寫代碼，以便在5秒后返回原始模糊的源圖像。P.S.：注釋中的代碼是我自己試圖編寫的。window.onload = init;function init() { var blurryPic = document.getElementsByTagName("img"); for (var i = 0; i < blurryPic.length; i++) { blurryPic[i].onclick = clarify; // setTimeout(resetPic, 5000); }}function clarify(eventObj) { var pic = eventObj.target; var id = pic.id; id = "images/" + id + ".jpg"; pic.src = id;}// function resetPic(eventObj) {// var pic = eventObj.target;// var id = pic.id;// id = "images/" + id + "blur.jpg";// pic.src = id;// }

查看完整描述

4 回答

慕慕森

TA貢獻1856條經驗獲得超17個贊

請嘗試此代碼，到有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？

它會切換回來，因為默認情況下，當您單擊鏈接時，它會跟隨鏈接并加載頁面。就您而言，您不希望這樣。您可以通過執行 e.prevent默認（）;

$(function() {

$('.menulink').click(function(){

$("#bg").attr('src',"img/picture1.jpg");

return false;

});

我希望這段代碼會很有用。

反對回復 2022-09-23

料青山看我應如是

TA貢獻1772條經驗獲得超8個贊

感謝您的所有答案！我只想在JS中完成它，這樣CSS就不起作用了。欣賞答案，并一定會納入未來的項目！

附言這就是最終完成它的原因。

window.onload = init;

function init() {

var blurryPics = document.getElementsByTagName("img");

for (var i = 0; i < blurryPics.length; i++) {

blurryPics[i].onclick = clarify;

}

function clarify(eventObj) {

var pic = eventObj.target;

var id = pic.id;

id = "images/" + id + ".jpg";

pic.src = id;

setTimeout(reBlur, 3000, pic);

}

function reBlur(eventObj) {

var pic = eventObj.target;

var id = pic.id;

id = "images/" + id + "blur.jpg";

pic.src = id;

}

反對回復 2022-09-23

神不在的星期二

TA貢獻1963條經驗獲得超6個贊

為此，我使用了一個if語句來檢查第一個加載的圖像文件是否存在。然后對文件使用屬性 src。下面是一個示例。

#javascript

function magicChanger(){

var myImage = document.getElementById("emailImage")

if (myImage.getAttribute("src") == "first loaded image"){

myImage.setAttribute("src", "second image")

}

else{

myImage.setAttribute("src", "first loaded image")

}

#html element

</button>

反對回復 2022-09-23

偶然的你

TA貢獻1841條經驗獲得超3個贊

使用CSS會更好：你的圖像保持不變，你只切換一個類，這個類讓你的圖像模糊。

document.getElementById("clickImg").addEventListener("click", function() {

this.classList.toggle("blurImg")

})

.blurImg {

-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */

filter: blur(5px);

}

如果你真的想要的是能夠重置原始圖像，我認為最好將其存儲在特定屬性中，如下所示：

document.getElementById("reset").addEventListener("click", function() {

document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')

})

var imgs = [

'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',

'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',

'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg'

]

document.getElementById("random").addEventListener("click", function() {

document.getElementById("clickImg").src = imgs[Math.floor(Math.random() * 3)]

})

反對回復 2022-09-23

4 回答
0 關注
164 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？

有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？

4 回答

添加回答

有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？

有沒有辦法在on.click src更改事件后將圖像src切換回原始圖像？