【每日一练】248—JS实现步骤效果

每日一练11个月前发布 admin
2,328 0

第248练的最终效果如下:

【每日一练】248—JS实现步骤效果

HTML:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>第248练</title>
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”container”>
      <div class=”split left”>
        <h1>Apple</h1>
        <button class=”btn”>Buy Now</button>
      </div>
      <div class=”split right”>
        <h1>Samsung</h1>
        <button class=”btn”>Buy Now</button>
      </div>
    </div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  text-align: center;
  font-family: Impact, Haettenschweiler, “Arial Narrow Bold”, sans-serif;
}
h1 {
  font-size: 100px;
  color: aliceblue;
  background-color: rgba(0, 0, 0, 0.3);
  letter-spacing: 4px;
}
.btn {
  background-color: black;
  color: white;
  padding: 20px 40px;
  font-size: 25px;
  border: 4px solid;
  cursor: pointer;
  transition: 1s background-color;
  white-space: nowrap;
}
.btn:hover {
  background-color: white;
  color: black;
}
.split {
  width: 50%;
  height: 100%;
  top: 0;
  overflow: hidden;
}
.split.left {
  position: absolute;
  left: 0;
  background-color: pink;
  background-image: url(“https://store.storeimages.cdn-apple.com/4982/as-images.apple.com/is/iphone-13-pro-family-hero?wid=940&hei=1112&fmt=png-alpha&.v=1631220221000”);
  background-size: cover;
}
.split.right {
  position: absolute;
  right: 0;
  background-color: lightblue;
  background-image: url(“https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6465/6465022_sd.jpg;maxHeight=640;maxWidth=550”);
  background-size: cover;
}
.active-left .left {
  width: 75%;
}
.active-left .right {
  width: 25%;
}
.active-right .left {
  width: 25%;
}
.active-right .right {
  width: 75%;
}
.left,
.right {
  transition: width 2s ease-in-out;
}

JS:

const containerEl = document.querySelector(“.container”);
const leftEl = document.querySelector(“.left”);
const rightEl = document.querySelector(“.right”);
leftEl.addEventListener(“mouseenter”, () => {
  containerEl.classList.add(“active-left”);
});
leftEl.addEventListener(“mouseleave”, () => {
  containerEl.classList.remove(“active-left”);
});
rightEl.addEventListener(“mouseenter”, () => {
  containerEl.classList.add(“active-right”);
});
rightEl.addEventListener(“mouseleave”, () => {
  containerEl.classList.remove(“active-right”);
});
© 版权声明

相关文章

暂无评论

暂无评论...