├── .gitignore
├── README.md
├── assets
    ├── noise.png
    ├── porthole.png
    ├── screen-video.mp4
    ├── screenshot.png
    ├── 伦敦城市轮廓线.jpg
    ├── 伦敦城市轮廓线.mp4
    ├── 加勒比.jpg
    ├── 加勒比.mp4
    ├── 大峡谷沉积物.jpg
    ├── 大峡谷沉积物.mp4
    ├── 巴塔哥尼亚湖.jpg
    ├── 巴塔哥尼亚湖.mp4
    ├── 巴塔哥尼亚的高山.jpg
    ├── 巴塔哥尼亚的高山.mp4
    ├── 杰克鱼群.jpg
    ├── 杰克鱼群.mp4
    ├── 格陵兰大冰川.jpg
    ├── 格陵兰大冰川.mp4
    ├── 梭鱼群.jpg
    ├── 梭鱼群.mp4
    ├── 纽约中城区.jpg
    ├── 纽约中城区.mp4
    ├── 迪拜城市轮廓线.jpg
    └── 迪拜城市轮廓线.mp4
├── favicon.svg
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | *4k.mp4
2 | .DS_Store
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 舷窗 - 沉浸式风景体验
 2 | 
 3 | 这是一个模拟舷窗风景的网页程序，为你提供一种身临其境的独特体验，仿佛你就正坐在舷窗旁欣赏美丽的风景。
 4 | 
 5 | 在这个网页中，你可以欣赏到各种雄伟壮观的景色，如山峰耸立、城市地标、海底世界等。
 6 | 
 7 | 无论是在家中、办公室还是旅行途中，都可以通过这个网页享受到大自然的美丽和宁静。
 8 | 
 9 | ![网页效果展示](./assets/screenshot.png)
10 | 


--------------------------------------------------------------------------------
/assets/noise.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/noise.png


--------------------------------------------------------------------------------
/assets/porthole.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/porthole.png


--------------------------------------------------------------------------------
/assets/screen-video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/screen-video.mp4


--------------------------------------------------------------------------------
/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/screenshot.png


--------------------------------------------------------------------------------
/assets/伦敦城市轮廓线.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/伦敦城市轮廓线.jpg


--------------------------------------------------------------------------------
/assets/伦敦城市轮廓线.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/伦敦城市轮廓线.mp4


--------------------------------------------------------------------------------
/assets/加勒比.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/加勒比.jpg


--------------------------------------------------------------------------------
/assets/加勒比.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/加勒比.mp4


--------------------------------------------------------------------------------
/assets/大峡谷沉积物.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/大峡谷沉积物.jpg


--------------------------------------------------------------------------------
/assets/大峡谷沉积物.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/大峡谷沉积物.mp4


--------------------------------------------------------------------------------
/assets/巴塔哥尼亚湖.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/巴塔哥尼亚湖.jpg


--------------------------------------------------------------------------------
/assets/巴塔哥尼亚湖.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/巴塔哥尼亚湖.mp4


--------------------------------------------------------------------------------
/assets/巴塔哥尼亚的高山.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/巴塔哥尼亚的高山.jpg


--------------------------------------------------------------------------------
/assets/巴塔哥尼亚的高山.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/巴塔哥尼亚的高山.mp4


--------------------------------------------------------------------------------
/assets/杰克鱼群.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/杰克鱼群.jpg


--------------------------------------------------------------------------------
/assets/杰克鱼群.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/杰克鱼群.mp4


--------------------------------------------------------------------------------
/assets/格陵兰大冰川.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/格陵兰大冰川.jpg


--------------------------------------------------------------------------------
/assets/格陵兰大冰川.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/格陵兰大冰川.mp4


--------------------------------------------------------------------------------
/assets/梭鱼群.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/梭鱼群.jpg


--------------------------------------------------------------------------------
/assets/梭鱼群.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/梭鱼群.mp4


--------------------------------------------------------------------------------
/assets/纽约中城区.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/纽约中城区.jpg


--------------------------------------------------------------------------------
/assets/纽约中城区.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/纽约中城区.mp4


--------------------------------------------------------------------------------
/assets/迪拜城市轮廓线.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/迪拜城市轮廓线.jpg


--------------------------------------------------------------------------------
/assets/迪拜城市轮廓线.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Codennnn/porthole/00af2f13e1a015d474170dec11b0e98506c83971/assets/迪拜城市轮廓线.mp4


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   enable-background="new 0 0 512 512"
 3 |   viewBox="0 0 512 512"
 4 |   xmlns="http://www.w3.org/2000/svg"
 5 | >
 6 |   <circle cx="256" cy="256" fill="#ebc9a0" r="248.5" />
 7 |   <circle cx="256" cy="256" fill="#d7b48c" r="208.42" />
 8 |   <circle cx="256" cy="256" fill="#f5dcb4" r="184.37" />
 9 |   <circle cx="256" cy="256" fill="#bff0ff" r="152.31" />
10 |   <circle cx="256" cy="256" fill="#dff8ff" r="88.18" />
11 |   <path
12 |     d="m407.522 240.443c-43.76 3.892-47.334 31.589-97.663 31.589-54.168 0-54.168-32.065-108.335-32.065-50.111 0-53.883 27.429-97.047 31.54 7.77 76.833 72.642 136.799 151.523 136.799 84.117 0 152.306-68.19 152.306-152.306 0-5.252-.266-10.442-.784-15.557z"
13 |     fill="#00c3ff"
14 |   />
15 |   <path
16 |     d="m407.522 240.443c-43.76 3.892-47.334 31.589-97.663 31.589-54.168 0-54.168-32.065-108.335-32.065-50.111 0-53.883 27.429-97.047 31.54 1.129 11.164 3.593 21.912 7.002 32.231 29.511-1.733 46.964-12.535 59.78-20.626 11.312-7.147 17.551-11.081 33.661-11.081 16.118 0 22.35 3.934 33.661 11.081 14.028 8.854 33.231 20.984 67.894 20.984 34.656 0 53.858-12.134 67.879-20.991 11.03-6.967 17.105-10.803 32.166-11.061.324-.005.622-.096.943-.112.545-5.239.842-10.55.842-15.932.001-5.252-.265-10.442-.783-15.557z"
17 |     fill="#00aaf0"
18 |   />
19 |   <path
20 |     d="m437.02 74.98c-48.353-48.351-112.64-74.98-181.02-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02s26.629 132.667 74.98 181.02c48.353 48.351 112.64 74.98 181.02 74.98s132.667-26.629 181.02-74.98c48.351-48.353 74.98-112.64 74.98-181.02s-26.629-132.667-74.98-181.02zm-10.607 351.433c-45.519 45.519-106.039 70.587-170.413 70.587s-124.894-25.068-170.413-70.587-70.587-106.039-70.587-170.413 25.068-124.894 70.587-170.413 106.039-70.587 170.413-70.587 124.894 25.068 170.413 70.587 70.587 106.039 70.587 170.413-25.068 124.894-70.587 170.413z"
21 |   />
22 |   <path
23 |     d="m79.275 248.796c1.802-44.495 20.148-86.353 51.658-117.863 31.511-31.511 73.369-49.856 117.864-51.658 44.243-1.794 87.183 12.855 120.923 41.245 3.17 2.667 7.901 2.26 10.567-.91 2.667-3.169 2.259-7.9-.91-10.567-36.61-30.804-83.188-46.697-131.188-44.755-48.271 1.955-93.68 21.856-127.863 56.04-34.183 34.183-54.084 79.592-56.04 127.862-1.944 47.987 13.95 94.577 44.753 131.187 1.483 1.763 3.605 2.671 5.743 2.671 1.704 0 3.418-.578 4.825-1.761 3.169-2.667 3.577-7.398.91-10.567-28.387-33.741-43.034-76.685-41.242-120.924z"
24 |   />
25 |   <path
26 |     d="m392.39 131.712c-3.169 2.667-3.577 7.398-.91 10.567 28.389 33.739 43.037 76.684 41.245 120.923-1.802 44.495-20.148 86.354-51.658 117.864-31.511 31.51-73.369 49.856-117.863 51.658-44.238 1.792-87.183-12.855-120.922-41.243-3.169-2.667-7.901-2.259-10.567.91-2.667 3.169-2.259 7.901.91 10.567 34.608 29.119 78.129 44.914 123.323 44.913 2.614 0 5.24-.053 7.864-.159 48.271-1.955 93.68-21.857 127.862-56.04 34.183-34.183 54.085-79.593 56.04-127.864 1.943-47.987-13.951-94.577-44.755-131.187-2.668-3.168-7.4-3.576-10.569-.909z"
27 |   />
28 |   <path
29 |     d="m256 96.193c-88.118 0-159.807 71.689-159.807 159.807s71.689 159.807 159.807 159.807 159.807-71.689 159.807-159.807-71.689-159.807-159.807-159.807zm0 15c71.956 0 131.813 52.759 142.942 121.623-21.815 1.74-34.453 9.723-45.723 16.844-12.104 7.648-23.538 14.873-46.74 14.873-23.22 0-34.662-7.225-46.776-14.874-12.761-8.058-27.225-17.19-54.785-17.19s-42.024 9.133-54.785 17.19c-10.634 6.715-20.733 13.091-38.703 14.559-.153-2.721-.238-5.459-.238-8.217.001-79.848 64.961-144.808 144.808-144.808zm0 289.614c-71.975 0-131.844-52.786-142.951-121.677 21.423-1.845 33.932-9.74 45.094-16.788 12.114-7.649 23.556-14.874 46.776-14.874s34.662 7.225 46.776 14.874c12.761 8.058 27.225 17.19 54.785 17.19 27.544 0 41.999-9.133 54.752-17.192 10.752-6.794 20.965-13.241 39.334-14.605.155 2.736.241 5.49.241 8.265 0 79.847-64.96 144.807-144.807 144.807z"
30 |   />
31 |   <path
32 |     d="m39.645 248.5h-.08c-4.142 0-7.46 3.358-7.46 7.5s3.398 7.5 7.54 7.5 7.5-3.358 7.5-7.5-3.358-7.5-7.5-7.5z"
33 |   />
34 |   <path
35 |     d="m472.516 248.5h-.08c-4.142 0-7.46 3.358-7.46 7.5s3.398 7.5 7.54 7.5 7.5-3.358 7.5-7.5-3.358-7.5-7.5-7.5z"
36 |   />
37 |   <path
38 |     d="m256.04 47.104c4.142 0 7.5-3.358 7.5-7.5v-.08c0-4.142-3.358-7.46-7.5-7.46s-7.5 3.398-7.5 7.54 3.358 7.5 7.5 7.5z"
39 |   />
40 |   <path
41 |     d="m256.04 464.936c-4.142 0-7.5 3.398-7.5 7.54s3.358 7.5 7.5 7.5 7.5-3.358 7.5-7.5v-.08c0-4.143-3.358-7.46-7.5-7.46z"
42 |   />
43 |   <path
44 |     d="m103.025 110.485c1.919 0 3.839-.732 5.303-2.197 2.929-2.929 2.929-7.678 0-10.606l-.057-.057c-2.929-2.928-7.649-2.901-10.578.028s-2.901 7.706.028 10.635c1.466 1.465 3.385 2.197 5.304 2.197z"
45 |   />
46 |   <path
47 |     d="m414.358 403.711c-2.929-2.928-7.649-2.901-10.578.028s-2.901 7.706.028 10.635c1.464 1.464 3.384 2.197 5.303 2.197s3.839-.732 5.303-2.197c2.929-2.929 2.929-7.678 0-10.606z"
48 |   />
49 |   <path
50 |     d="m409.055 110.485c1.919 0 3.839-.732 5.303-2.197l.057-.057c2.929-2.929 2.901-7.649-.028-10.578-2.929-2.928-7.706-2.901-10.635.028s-2.929 7.678 0 10.606c1.464 1.466 3.383 2.198 5.303 2.198z"
51 |   />
52 |   <path
53 |     d="m97.666 403.768c-2.929 2.929-2.929 7.678 0 10.606 1.464 1.464 3.384 2.197 5.303 2.197s3.839-.732 5.303-2.197l.057-.057c2.929-2.929 2.901-7.649-.028-10.578-2.929-2.927-7.706-2.901-10.635.029z"
54 |   />
55 |   <path
56 |     d="m278.556 145.513c38.523 7.82 70.617 35.737 83.756 72.857 1.089 3.078 3.982 5 7.07 5 .831 0 1.675-.139 2.502-.432 3.905-1.382 5.95-5.668 4.568-9.573-14.887-42.059-51.255-73.691-94.912-82.553-4.058-.822-8.018 1.799-8.842 5.858-.824 4.06 1.799 8.019 5.858 8.843z"
57 |   />
58 |   <path
59 |     d="m242.576 276.763c-11.669-7.365-19.378-12.231-37.658-12.231-18.274 0-25.98 4.862-37.667 12.236-3.549 2.242-7.219 4.561-11.408 6.867-5.088 2.8-9.994 5.04-14.999 6.846-3.896 1.406-5.915 5.705-4.509 9.601 1.103 3.056 3.984 4.956 7.055 4.956.845 0 1.705-.144 2.545-.447 5.75-2.076 11.357-4.631 17.139-7.814 4.586-2.524 8.625-5.075 12.203-7.336 11.106-7.008 15.703-9.908 29.641-9.908 13.942 0 18.541 2.903 29.658 9.919 3.501 2.21 8.131 1.162 10.342-2.341s1.161-8.137-2.342-10.348z"
60 |   />
61 |   <path
62 |     d="m326.573 295.005c-6.313 1.056-13.073 1.592-20.091 1.592-4.142 0-7.5 3.358-7.5 7.5s3.358 7.5 7.5 7.5c7.846 0 15.438-.605 22.567-1.798 4.085-.684 6.843-4.549 6.159-8.635-.684-4.085-4.547-6.845-8.635-6.159z"
63 |   />
64 | </svg>
65 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | 
  3 | <html lang="zh-CN">
  4 |   <head>
  5 |     <meta charset="UTF-8" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8 |     <meta name="color-scheme" content="dark" />
  9 |     <link rel="icon" type="image/svg+xml" href="./favicon.svg" sizes="any" />
 10 | 
 11 |     <title>舷窗</title>
 12 | 
 13 |     <style>
 14 |       * {
 15 |         box-sizing: border-box;
 16 |       }
 17 | 
 18 |       html,
 19 |       body {
 20 |         width: 100%;
 21 |         height: 100%;
 22 |         margin: 0;
 23 |         background-color: #18202b;
 24 |       }
 25 | 
 26 |       .root {
 27 |         position: relative;
 28 |         width: 100%;
 29 |         height: 100%;
 30 |         display: flex;
 31 |         justify-content: center;
 32 |         align-items: center;
 33 |       }
 34 | 
 35 |       .root::before {
 36 |         content: "";
 37 |         position: absolute;
 38 |         top: 0;
 39 |         bottom: 0;
 40 |         left: 0;
 41 |         right: 0;
 42 |         background-image: url("./assets/noise.png");
 43 |         background-repeat: repeat;
 44 |         opacity: 0.04;
 45 |         pointer-events: none;
 46 |         user-select: none;
 47 |       }
 48 | 
 49 |       .main {
 50 |         position: relative;
 51 |         height: 90vh;
 52 |         border-radius: 6%;
 53 |         overflow: hidden;
 54 |         outline: 1px solid #5a6275;
 55 |       }
 56 | 
 57 |       .main img {
 58 |         position: relative;
 59 |         z-index: 99;
 60 |         height: 100%;
 61 |         user-select: none;
 62 |         pointer-events: none;
 63 |       }
 64 | 
 65 |       .main .video {
 66 |         position: absolute;
 67 |         top: 0;
 68 |         bottom: 0;
 69 |         left: 50%;
 70 |         width: 100%;
 71 |         height: 100%;
 72 |         padding: 28% 0 25% 0;
 73 |         transform: translateX(-50%);
 74 |       }
 75 | 
 76 |       .main .video video {
 77 |         height: 100%;
 78 |       }
 79 | 
 80 |       .popup {
 81 |         position: absolute;
 82 |         top: 0;
 83 |         bottom: 0;
 84 |         right: 0;
 85 |         z-index: 999;
 86 |         width: 450px;
 87 |         overflow-y: auto;
 88 |         backdrop-filter: blur(30px) saturate(120%);
 89 |         border-left: 1px solid #5a6275;
 90 |         display: none;
 91 |       }
 92 | 
 93 |       .popup.show {
 94 |         display: flex;
 95 |         flex-direction: column;
 96 |       }
 97 | 
 98 |       .vistas {
 99 |         display: grid;
100 |         grid-template-columns: 1fr 1fr;
101 |         grid-template-rows: auto;
102 |         gap: 20px;
103 |         max-height: 100%;
104 |         padding: 20px;
105 |         overflow-y: auto;
106 |       }
107 | 
108 |       .vistas .item {
109 |         display: flex;
110 |         flex-direction: column;
111 |         justify-content: center;
112 |         align-items: center;
113 |         color: #fff;
114 |       }
115 | 
116 |       .vistas img {
117 |         width: 100%;
118 |         border-radius: 5%;
119 |       }
120 | 
121 |       .vistas img ~ span {
122 |         margin-top: 10px;
123 |       }
124 | 
125 |       button {
126 |         cursor: pointer;
127 |       }
128 | 
129 |       #select {
130 |         position: absolute;
131 |         top: 20px;
132 |         right: 20px;
133 |         z-index: 99;
134 |       }
135 | 
136 |       @media screen and (max-width: 930px) {
137 |         .root {
138 |           display: flex;
139 |           flex-direction: column;
140 |         }
141 | 
142 |         .main {
143 |           width: 100%;
144 |           height: auto;
145 |           outline: none;
146 |           border-radius: 0;
147 |         }
148 | 
149 |         .main img {
150 |           width: 100%;
151 |           height: auto;
152 |         }
153 | 
154 |         .popup {
155 |           width: 100vw;
156 |         }
157 | 
158 |         .vistas {
159 |           flex-direction: row;
160 |           flex-wrap: wrap;
161 |           padding: 30px;
162 |           font-size: 12px;
163 |         }
164 |       }
165 |     </style>
166 |   </head>
167 | 
168 |   <body>
169 |     <div class="root">
170 |       <button id="select">选择风景</button>
171 | 
172 |       <div class="main">
173 |         <img src="./assets/porthole.png" />
174 |         <div class="video">
175 |           <video id="video" autoplay loop muted>
176 |             <source src="./assets/巴塔哥尼亚的高山.mp4" type="video/mp4" />
177 |           </video>
178 |         </div>
179 |       </div>
180 | 
181 |       <div class="popup">
182 |         <div style="padding: 20px 20px 10px 20px">
183 |           <button id="close-btn">关闭</button>
184 |         </div>
185 |         <div style="flex: 1; overflow: hidden">
186 |           <div class="vistas">
187 |             <div class="item" data-src="巴塔哥尼亚的高山">
188 |               <img src="./assets/巴塔哥尼亚的高山.jpg" />
189 |               <span>巴塔哥尼亚的高山</span>
190 |             </div>
191 |             <div class="item" data-src="巴塔哥尼亚湖">
192 |               <img src="./assets/巴塔哥尼亚湖.jpg" />
193 |               <span>巴塔哥尼亚湖</span>
194 |             </div>
195 |             <div class="item" data-src="格陵兰大冰川">
196 |               <img src="./assets/格陵兰大冰川.jpg" />
197 |               <span>格陵兰大冰川</span>
198 |             </div>
199 |             <div class="item" data-src="加勒比">
200 |               <img src="./assets/加勒比.jpg" />
201 |               <span>加勒比</span>
202 |             </div>
203 |             <div class="item" data-src="迪拜城市轮廓线">
204 |               <img src="./assets/迪拜城市轮廓线.jpg" />
205 |               <span>迪拜城市轮廓线</span>
206 |             </div>
207 |             <div class="item" data-src="伦敦城市轮廓线">
208 |               <img src="./assets/伦敦城市轮廓线.jpg" />
209 |               <span>伦敦城市轮廓线</span>
210 |             </div>
211 |             <div class="item" data-src="纽约中城区">
212 |               <img src="./assets/纽约中城区.jpg" />
213 |               <span>纽约中城区</span>
214 |             </div>
215 |             <div class="item" data-src="大峡谷沉积物">
216 |               <img src="./assets/大峡谷沉积物.jpg" />
217 |               <span>大峡谷沉积物</span>
218 |             </div>
219 |             <div class="item" data-src="杰克鱼群">
220 |               <img src="./assets/杰克鱼群.jpg" />
221 |               <span>杰克鱼群</span>
222 |             </div>
223 |             <div class="item" data-src="梭鱼群">
224 |               <img src="./assets/梭鱼群.jpg" />
225 |               <span>梭鱼群</span>
226 |             </div>
227 |           </div>
228 |         </div>
229 |       </div>
230 |     </div>
231 | 
232 |     <script>
233 |       const video = document.querySelector("#video");
234 |       const popup = document.querySelector(".popup");
235 | 
236 |       document.querySelector("#select").addEventListener("click", () => {
237 |         popup.classList.add("show");
238 |       });
239 | 
240 |       document.querySelector("#close-btn").addEventListener("click", () => {
241 |         popup.classList.remove("show");
242 |       });
243 | 
244 |       const items = document.querySelectorAll(".vistas .item");
245 | 
246 |       items.forEach((item) => {
247 |         item.addEventListener("click", (ev) => {
248 |           video.src = `./assets/${ev.currentTarget.dataset.src}.mp4`;
249 |           video.load();
250 |         });
251 |       });
252 |     </script>
253 |   </body>
254 | </html>
255 | 


--------------------------------------------------------------------------------