为了账号安全,请及时绑定邮箱和手机立即绑定

有没有办法在on.click src更改事件后将图像src切换回原始图像?

有没有办法在on.click src更改事件后将图像src切换回原始图像?

斯蒂芬大帝 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贡献1528条经验 获得超17个赞

请尝试此代码,到 有没有办法在on.click src更改事件后将图像src切换回原始图像?


它会切换回来,因为默认情况下,当您单击链接时,它会跟随链接并加载页面。就您而言,您不希望这样。您可以通过执行 e.prevent默认();


$(function() {

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

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

   return false;

 });

});

我希望这段代码会很有用。


查看完整回答
反对 回复 4天前
?
料青山看我应如是

TA贡献1442条经验 获得超1个赞

感谢您的所有答案!我只想在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;

}


查看完整回答
反对 回复 4天前
?
神不在的星期二

TA贡献1629条经验 获得超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 id = "emailButton" onclick="magicChanger()">

    <img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email">

</button>


查看完整回答
反对 回复 4天前
?
偶然的你

TA贡献1500条经验 获得超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);

}

<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">

如果你真的想要的是能够重置原始图像,我认为最好将其存储在特定属性中,如下所示:


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)]

})

<input type="button" value="RESET" id="reset" />

<input type="button" value="RANDOM" id="random" /><br/>


<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" origSrc="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">


查看完整回答
反对 回复 4天前
  • 4 回答
  • 0 关注
  • 10 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信