feat: 添加瞬间页面模拟器功能
- 在 PC 端点击瞬间链接时,弹出模拟 iPhone 16 的窗口展示内容- 添加相应的 HTML、CSS 和 JavaScript 代码实现该功能 -优化了用户体验,特别是在大屏幕上查看瞬间内容时
This commit is contained in:
16
index.html
16
index.html
@@ -147,7 +147,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="https://moments.hehouhui.cn/"
|
||||
<a href="https://moments.hehouhui.cn/" class="moments-link"
|
||||
title="瞬间" target="_blank">
|
||||
<j class="fa-solid fa-camera"></j>
|
||||
<span class="label">瞬间</span>
|
||||
@@ -198,9 +198,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<!--黑暗主题-->
|
||||
<!-- 模拟iPhone 16容器 -->
|
||||
<div class="iphone-simulator">
|
||||
<div class="browser-view">
|
||||
<div class="close-btn"></div>
|
||||
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div class="overlay"></div>
|
||||
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/jquery.min.js"></script>
|
||||
<!--黑暗主题-->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/fetch.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/main.js?version=1"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/bj.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user