需要帮助使图像在单击时显示

我正在制作一个东西，当你点击隐藏的图像时，它就会出现。不过，每次我这样做，图像都会隐藏起来。我知道我实际上是在点击图像，因为我把它放在了我的光标下。它也起相反的作用。如果图像是可见的，并且我单击它，它将变为不可见。这是我的HTML:

document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
}

body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: block;
position: absolute;
transform: translate(-50%,-50%);
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 style="color: white; text-align: center">Boom! Salamon.<br>Click in the area below to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>

发生了什么事？

是的，正如@Abin所提到的，你没有添加任何代码来取消隐藏它。我已经修改了你的html和js文件来添加这个功能，就像当你点击文本时，它将再次可见。

注意：我已经添加了点击标题文本时的可见条件，但您可以在任何地方定义它。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Styles.css">
<title>Boom! Salamon</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<h2 id='clickme' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Boom!.png' height="250" width="250"></img>
<script src="app.js"></script>
</body>
</html>

app.js

document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
function animation(){
var boom = document.getElementById("boom");

boom.style.visibility = 'hidden';
document.getElementById("boom").src = 'file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png';
}
document.getElementById("clickme").onclick = function() {
boom.style.visibility = 'visible';
}

在上面我使用了纯js。

您提供的代码中没有任何内容来取消隐藏图像，我添加了一个根据您的req工作的示例代码。单击文本，图像将显示在底部。

/* document.addEventListener('mousemove', function(e) {
let body = document.querySelector('body');
let boom = document.getElementById('boom');
let left = e.pageX;
let top = e.pageY;
boom.style.left = left + 'px';
boom.style.top = top + 'px';
});
*/
var clickEl = document.getElementById('click-el')
clickEl.addEventListener('click', function(){
var imgEl = document.getElementById('boom');
imgEl.style.display = 'block';
})
/*
function animation(){
var boom = document.getElementById("boom");
boom.style.display = "none";
document.getElementById("boom").src = "file:///C:/Users/domin/Desktop/Atom/rootfolder/Boom%20Salamon/Salamon.png";
} */

body {
background-color: #000000;
}
header {
background: grey;
padding: 10px;
margin: 0px;
font-size: 13px
}
#boom{
display: none;
}

<header>
<h2 id='click-el' style="color: white; text-align: center">Boom! Salamon.<br>Click here to witness the magic!</h2>
</header>
<img onclick='animation()' id="boom" src='https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg' height="250" width="250"/>

相关内容

最新更新

热门标签：