【每日一练】210—视频预告片弹出窗口

每日一练11个月前更新 admin
1,125 0

第210练的最终效果如下:

【每日一练】210—视频预告片弹出窗口

实现代码:

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>210练-视频预告片弹出窗口</title>
    <link
      rel=”stylesheet”
      href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css”
      integrity=”sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==”
      crossorigin=”anonymous”
      referrerpolicy=”no-referrer”
    />
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”main-container”>
      <img
        src=”210.jpg”
        alt=”movie-image”
      />
      <h1>视频预告片标题内容</h1>
      <p>
        视频预告片介绍内容,视频预告片介绍内容,视频预告片介绍内容,视频预告片介绍内容,视频预告片介绍内容,视频预告片介绍内容。
      </p>
      <button class=”btn”>现在观看</button>
    </div>
    <div class=”trailer-container active”>
      <video src=”trailer.mp4″ controls=”true”></video>
      <i class=”fas fa-times fa-2x close-icon”></i>
    </div>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

body {
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background-color: black;
  }
  .main-container {
    max-width: 550px;
    padding: 10px;
  }
  .main-container img {
    max-width: 100%;
    margin-bottom: 15px;
    border-radius: 10px;
  }
  .main-container h1 {
    color: white;
    font-weight: 500;
  }
  .main-container p {
    color: white;
    margin: 15px 0;
  }
  .btn {
    background-color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
  }
  .btn:hover {
    background-color: orange;
  }
  .trailer-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: black;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.7s;
  }
  .active.trailer-container {
    visibility: hidden;
    opacity: 0;
  }
  .trailer-container video {
    position: relative;
    max-width: 900px;
    outline: none;
  }
  @media (max-width: 991px) {
    .trailer-container video {
      max-width: 90%;
    }
  }
  .close-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    color: white;
    cursor: pointer;
  }

JS:

const btnEl = document.querySelector(“.btn”);
const closeIconEl = document.querySelector(“.close-icon”);
const trailerContainerEl = document.querySelector(“.trailer-container”);
const videoEl = document.querySelector(“video”);
btnEl.addEventListener(“click”, () => {
  trailerContainerEl.classList.remove(“active”);
});
closeIconEl.addEventListener(“click”, () => {
  trailerContainerEl.classList.add(“active”);
  videoEl.pause();
  videoEl.currentTime = 0;
});
© 版权声明

相关文章

暂无评论

暂无评论...