我不久前开始写代码。我写了一个函数,当点击时,它会关注3张图片中的1张,并将另外2张图片发送到页面底部。虽然我设法让代码工作,但我觉得它可以比现在小得多。我开始感到恼火,因为我似乎找不到缩短它的方法。有什么帮助吗?
Here's a codepen link
const container = document.querySelector('.container');
let cards = document.querySelector('.cards');
let card = document.querySelector('.card');
let body = document.body;
let card1 = document.querySelector('.card1');
let card2 = document.querySelector('.card2');
let card3 = document.querySelector('.card3');
function moveImages(e) {
let v = window.innerWidth;
let h = window.innerHeight;
let x = (e.clientX / v) - 0.5
let y = (e.clientY / h) - 0.5
cards.style.transform = `translate(${x*4}%, ${y*4}%)`;
}
container.addEventListener('mousemove', e => moveImages(e));
/*function choosePicture(name) {
if (name) {
if (document.querySelector('.opened')){
document.querySelector('.opened').classList.remove('opened');
} else {
name.classList.add('opened');
}
}
}*/
function choosePicture(name) {
if (name === card1) {
if (document.querySelector('.opened')) {
document.querySelector('.opened').classList.remove('opened');
card2.classList.remove('moveToBottom');
card3.classList.remove('moveToBottom');
} else {
card1.classList.add('opened');
card2.classList.add('moveToBottom');
card3.classList.add('moveToBottom');
}
} else if (name === card2) {
if (document.querySelector('.opened')) {
document.querySelector('.opened').classList.remove('opened');
card1.classList.remove('moveToBottom');
card3.classList.remove('moveToBottom');
} else {
card2.classList.add('opened');
card1.classList.add('moveToBottom');
card3.classList.add('moveToBottom');
}
} else if (name === card3) {
if (document.querySelector('.opened')) {
document.querySelector('.opened').classList.remove('opened');
card1.classList.remove('moveToBottom');
card2.classList.remove('moveToBottom');
} else {
card3.classList.add('opened');
card1.classList.add('moveToBottom');
card2.classList.add('moveToBottom');
}
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: rgb(52, 0, 108);
background: linear-gradient(0deg, rgba(52, 0, 108, 1) 0%, rgba(123, 0, 255, 1) 100%);
overflow: hidden;
}
.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.cards {
display: flex;
align-items: center;
justify-content: center;
transition-timing-function: ease-in-out;
touch-action: none;
}
.card {
height: 400px;
width: 225px;
border-radius: 20px;
cursor: pointer;
overflow: hidden;
transition-duration: 0.5s;
z-index: 999;
}
.img {
max-width: 100%;
object-fit: cover;
border-radius: 20px;
transition-duration: 0.5s;
filter: blur(2px);
cursor: pointer;
}
.card1 {
transform: rotateZ(-15deg) translateX(20%) translateY(13%);
z-index: 998;
}
.card3 {
transform: rotateZ(15deg) translateX(-20%) translateY(13%);
z-index: 997;
}
.img:hover {
filter: blur(0);
}
.card1:hover {
transform: rotateZ(-15.5deg) translateX(18%) translateY(8%);
scale: 1.02;
}
.card3:hover {
transform: rotateZ(17deg) translateX(-18%) translateY(8%);
scale: 1.02;
}
.card2:hover {
transform: translateY(-3%) rotateZ(2deg);
scale: 1.02;
}
.opened {
transform: rotateZ(0deg) translateX(0%) translateY(-7%);
scale: 1.4;
}
.opened:hover {
transform: rotateZ(0deg) translateX(0%) translateY(-7%);
scale: 1.4;
}
.moveToBottom {
transform: translateY(500%);
}
<div class="container">
<div class="cards" id="cards">
<div class="card1 card" onclick="choosePicture(card1)"><img src="https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
<div class="card2 card" onclick="choosePicture(card2)"><img src="https://images.unsplash.com/photo-1566895291281-ea63efd4bdbc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fDklM0ExNnxlbnwwfHwwfHx8MA%3D%3D" alt="" class="img img1"></div>
<div class="card3 card" onclick="choosePicture(card3)"><img src="https://images.unsplash.com/photo-1616578492900-ea5a8fc6c341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
</div>
</div>
我知道这个:
function choosePicture(name) {
if (name === card1 || card2 || card3) {
if (document.querySelector('.opened')){
document.querySelector('.opened').classList.remove('opened');
} else {
name.classList.add('opened');
}
}
}
型
...但这只处理了函数的第一部分。我如何才能使用更少的代码将其他2张图片发送到底部并返回?哦,如果这很重要,我现在只知道vanilla JS:/
1条答案
按热度按时间rsaldnfx1#
我认为把它们放在一个数组中之后迭代它们可能会有帮助。
就像这样:
字符串