我正在创建一个拼贴画,您可以在其中单击,图片会在单击的位置弹出。它看起来是我想要的,但现在导航栏不起作用,因为我无法单击它。另外,由于我在 css 中使用 img,因此它会影响我网站的其余部分。
const images = [
"collage1.webp", "collage2.jpg", "collage3.jpg", "collage4.jpg", "collage5.jpg", "collage6.jpg"
]
let i = 0
function placeImage(x, y) {
const nextImage = images[i]
const img = document.createElement("img")
img.setAttribute("src", nextImage)
img.style.left = x + "px"
img.style.top = y + "px"
img.style.transform = "translate(-50%, -50%) scale(0.5) rotate(" + (Math.random() * 20 - 10) + "deg)"
document.body.appendChild(img)
i = i + 1
if (i >= images.length) {
i = 0
}
}
document.addEventListener("click", function(event) {
event.preventDefault()
placeImage(event.pageX, event.pageY)
})
document.addEventListener("touchend", function(event) {
event.preventDefault()
placeImage(event.pageX, event.pageY)
})
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-image: url("background3.jpg");
}
.topnav {
overflow: hidden;
/*background-color: #214a63;*/
/*#0A1128*/
/*display:flex;*/
justify-content: left;
align-items: left;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4db1f0;
color: white;
}
/*test for favicon menu item*/
.topnav a.split {
float: right;
padding: 14px 16px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
}
#wrap {
min-height: 100%;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
h1 {
text-align: center;
}
/*
img {
width: 400px;
height: auto;
}*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*for floating selfie*/
.flier.self {
width: 400px;
height: auto;
}
/*for linked in logo*/
.linkedin {
height: 40px;
width: auto;
}
/* for the about me page (looks good but gets rid of linked in image and cant click tabs)*/
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
img {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%) scale(0.5);
animation: fadein 0.5;
}
<body>
<div class="topnav">
<a href="index.html">Home</a>
<a class="active" href="#aboutMe">About Me</a>
<a href="vacation.html">Vacation Spots</a>
<a href="eightBall.html">Magic Eight Ball</a>
<a href="dog.html">My Dog</a>
<a href="linked in goes here" target="_blank" class="split"> <img src="LI-In-Bug.png" class="linkedin"></a>
</div>
<h1>About Me</h1>
<script src="collage.js"></script>
</body>
const images = [
"collage1.webp", "collage2.jpg", "collage3.jpg", "collage4.jpg", "collage5.jpg", "collage6.jpg"
]
let i = 0
function placeImage(x, y) {
const nextImage = images[i]
const img = document.createElement("img")
img.setAttribute("src", nextImage)
img.style.left = x + "px"
img.style.top = y + "px"
img.style.transform = "translate(-50%, -50%) scale(0.5) rotate(" + (Math.random() * 20 - 10) + "deg)"
img.classList.add("collage")
document.body.appendChild(img)
i = i + 1
if (i >= images.length) {
i = 0
}
}
document.addEventListener("click", function(event) {
placeImage(event.pageX, event.pageY)
})
document.addEventListener("touchend", function(event) {
placeImage(event.pageX, event.pageY)
})
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-image: url("background3.jpg");
}
.topnav {
overflow: hidden;
/*background-color: #214a63;*/
/*#0A1128*/
/*display:flex;*/
justify-content: left;
align-items: left;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4db1f0;
color: white;
}
/*test for favicon menu item*/
.topnav a.split {
float: right;
padding: 14px 16px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
}
#wrap {
min-height: 100%;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
h1 {
text-align: center;
}
/*
img {
width: 400px;
height: auto;
}*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*for floating selfie*/
.flier.self {
width: 400px;
height: auto;
}
/*for linked in logo*/
.linkedin {
height: 40px;
width: auto;
}
/* for the about me page (looks good but gets rid of linked in image and cant click tabs)*/
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
.collage {
position: absolute;
}
<body>
<div class="topnav">
<a href="index.html">Home</a>
<a class="active" href="#aboutMe">About Me</a>
<a href="vacation.html">Vacation Spots</a>
<a href="eightBall.html">Magic Eight Ball</a>
<a href="dog.html">My Dog</a>
<a href="linked in goes here" target="_blank" class="split"> <img src="LI-In-Bug.png" class="linkedin"></a>
</div>
<h1>About Me</h1>
<script src="collage.js"></script>
</body>