第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><linkrel=”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”><imgsrc=”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;});
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
