feat(iconfont): 新增朋友图标并优化瞬间功能
- 在 iconfont.css 中添加了新的朋友图标 (\e84d) -优化了瞬间功能的加载和显示逻辑 - 更新了 CDN链接为更快的镜像源 - 修复了一些小的前端问题，如百度统计和 Google Analytics 的加载顺序
This commit is contained in:
hehh
@@ -43,6 +43,10 @@
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-friend:before {
|
||||
content: "\e84d";
|
||||
}
|
||||
|
||||
.icon-email:before {
|
||||
content: "\e6f5";
|
||||
}
|
||||
|
||||
243
css/style.css
243
css/style.css
@@ -10,8 +10,7 @@ body {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
a:before
|
||||
{
|
||||
a:before {
|
||||
border-radius: 25px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -25,6 +24,7 @@ a:before
|
||||
-moz-perspective: 900px;
|
||||
perspective: 900px;
|
||||
}
|
||||
|
||||
.ih-item.circle.effect .img {
|
||||
z-index: 11;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
@@ -156,6 +156,7 @@ a:before
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ih-item.circle .img:before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
@@ -183,6 +184,7 @@ a:before
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@media all and (max-width: 780px) {
|
||||
.ih-item.circle .img {
|
||||
position: relative;
|
||||
@@ -191,23 +193,28 @@ a:before
|
||||
/*margin-top: 20px;*/
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ih-item.circle {
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ih-item.circle .info .info-back h2{
|
||||
|
||||
.ih-item.circle .info .info-back h2 {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin-bottom: 0.1em !important;
|
||||
font-size: 2em !important;
|
||||
}
|
||||
|
||||
.panel-subtitle {
|
||||
font-size: 1em !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**************抖动效果******************/
|
||||
.profilepic {
|
||||
text-align: center;
|
||||
@@ -7903,7 +7910,6 @@ tbody td {
|
||||
}
|
||||
|
||||
.avatar,
|
||||
|
||||
.logo {
|
||||
border-radius: 50%;
|
||||
border: 3px solid #fff;
|
||||
@@ -8058,72 +8064,6 @@ hr {
|
||||
.panel-main__content--fixed {
|
||||
width: 480px;
|
||||
transition: width 1s;
|
||||
/* 模拟iPhone 16容器样式 */
|
||||
.iphone-simulator {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(40%, -50%);
|
||||
width: 414px; /* iPhone 16 Pro Max宽度 */
|
||||
height: 896px; /* iPhone 16 Pro Max高度 */
|
||||
padding: 40px 20px 20px 20px;
|
||||
background: url('https://cdn.jsdelivr.net/gh/listener-He/images@default/iphone-frame.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 内部浏览器视图容器 */
|
||||
.browser-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* MacBook风格的关闭按钮 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* 遮罩层 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.iphone-simulator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.iphone-simulator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 10px;
|
||||
background: #f2f2f2;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: width 1s;
|
||||
/* Safari */
|
||||
}
|
||||
@@ -8541,7 +8481,7 @@ j {
|
||||
}
|
||||
|
||||
.gwab {
|
||||
background: url(/img/beian.png) no-repeat;
|
||||
background: url(/images/bj/1.jpg) no-repeat;
|
||||
background-size: 12px 12px;
|
||||
background-position: 3px 2px;
|
||||
padding-left: 18px;
|
||||
@@ -10169,3 +10109,164 @@ j {
|
||||
.iziToast-message.slideIn {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
|
||||
/* 模拟iPhone 16容器样式 */
|
||||
.iphone-simulator {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
right: 1%;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
width: 393px; /* iPhone 16 Pro 宽度 */
|
||||
height: 852px; /* iPhone 16 Pro 高度 */
|
||||
border-radius: 47px; /* 真机圆角 */
|
||||
box-shadow: 0 0 0 12px #1a1a1a, /* 边框模拟 */
|
||||
0 0 0 14px #000, /* 外阴影 */
|
||||
0 40px 80px rgba(0,0,0,0.4); /* 真实阴影 */
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
z-index: 9999;
|
||||
}
|
||||
/* 模拟灵动岛 */
|
||||
.dynamic-island {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 126px;
|
||||
height: 37px;
|
||||
background: #000;
|
||||
border-radius: 20px;
|
||||
z-index: 10001;
|
||||
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||||
}
|
||||
|
||||
.dynamic-island.expand {
|
||||
width: 200px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.dynamic-island .content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.dynamic-island.expand .content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 左上角返回按钮（带箭头图标） */
|
||||
.back-btn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 10002;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.back-btn::before {
|
||||
content: '←';
|
||||
color: #258fb8;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/* 内部浏览器视图容器 */
|
||||
.browser-view {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 50px; /* 避让灵动岛 */
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
/* 移动端隐藏 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.iphone-simulator, .overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/*
|
||||
* CSS（骨架屏 + 淡入动画）
|
||||
* 点击链接 → 显示模拟器 → 动态加载网页 → 加载完成前显示骨架屏 → 加载完成后淡入网页
|
||||
*/
|
||||
.iphone-simulator .browser-view iframe {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.iphone-simulator .browser-view.loaded iframe {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
/* MacBook风格的关闭按钮 */
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
right: 20px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #ff5f56;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
/* 遮罩层 */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.iphone-simulator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.iphone-simulator {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
14
index-2.html
14
index-2.html
@@ -10,11 +10,11 @@
|
||||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||||
<meta name="author" content="Honesty">
|
||||
<title>Honesty的主页</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/onlinewebfonts.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/vno.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/iconfont.css">
|
||||
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/apple-touch-icon.png">
|
||||
<link rel="icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/onlinewebfonts.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/vno.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/iconfont.css">
|
||||
<link rel="apple-touch-icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/apple-touch-icon.png">
|
||||
<link rel="icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/favicon.ico">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -28,7 +28,7 @@
|
||||
<div class="panel-main__content">
|
||||
<div class="ih-item circle effect right_to_left">
|
||||
<a href="#" title="" class="blog-button">
|
||||
<div class="img"><img src="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/img/logo3.jpg" alt="img" class="js-avatar iUp profilepic"></div>
|
||||
<div class="img"><img src="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/img/logo3.jpg" alt="img" class="js-avatar iUp profilepic"></div>
|
||||
<div class="info iUp">
|
||||
<div class="info-back">
|
||||
<h2>
|
||||
@@ -122,7 +122,7 @@
|
||||
</div>
|
||||
</header>
|
||||
<script type="text/javascript" src="./assets/js/main.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/json/images.json?cb=getBingImages"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/json/images.json?cb=getBingImages"></script>
|
||||
<script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn" data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script>
|
||||
<script>
|
||||
// 百度站点统计
|
||||
|
||||
95
index.html
95
index.html
@@ -13,10 +13,10 @@
|
||||
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
|
||||
<meta name="author" content="HeHouHui">
|
||||
<title>Honesty的主页</title>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/style.css?version=2">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/iconfont.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/style.css?version=2">
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/iconfont.css">
|
||||
<link rel="apple-touch-icon" href="https://blog-file.hehouhui.cn/bj/logo.png">
|
||||
<link rel="icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/favicon.ico?version=1">
|
||||
<link rel="icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/favicon.ico?version=1">
|
||||
|
||||
<!--引入SweetAlert
|
||||
<script src="https://fastly.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>-->
|
||||
@@ -30,8 +30,8 @@
|
||||
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
||||
media="all">
|
||||
<!--科技炫酷按钮-->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/sey.css">
|
||||
<!-- <link rel="stylesheet" href="./css/style.css" />-->
|
||||
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/sey.css">
|
||||
<!-- <link rel="stylesheet" href="./css/style.css" />-->
|
||||
|
||||
<!--IE淘汰计划-->
|
||||
<script>
|
||||
@@ -42,9 +42,9 @@
|
||||
<body oncontextmenu=self.event.returnValue=false onselectstart="return false">
|
||||
<!-- style="background: url(https://blog-file.hehouhui.cn/bj/1.jpg) center center / cover no-repeat rgb(102, 102, 102);" -->
|
||||
<header id="panel" class="panel-cover"
|
||||
>
|
||||
>
|
||||
<!--星空背景-->
|
||||
<!-- <canvas id="bg"></canvas>-->
|
||||
<!-- <canvas id="bg"></canvas>-->
|
||||
<!--天气-->
|
||||
<div id="he-plugin-simple"></div>
|
||||
<script>
|
||||
@@ -76,26 +76,28 @@
|
||||
<div class="panel-main__inner panel-inverted">
|
||||
<div class="panel-main__content">
|
||||
<div class="ih-item circle effect right_to_left" id="avatar">
|
||||
<a class="blog-button" >
|
||||
<div class="img"><img src="https://cdn.jsdelivr.net/gh/listener-He/images@default/202309111525908.jpeg" alt="img"
|
||||
<a class="blog-button">
|
||||
<div class="img"><img
|
||||
src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg"
|
||||
alt="img"
|
||||
class="js-avatar iUp profilepic header-logo">
|
||||
</div>
|
||||
<div class="info iUp">
|
||||
<div class="info-back">
|
||||
<img alt="img" src="https://cdn.jsdelivr.net/gh/listener-He/Home/images/kl.gif"
|
||||
<img alt="img" src="https://cdn.jsdmirror.com/gh/listener-He/Home/images/kl.gif"
|
||||
class="js-avatar profilepic">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<h1 class="panel-cover__title panel-title iUp">
|
||||
<!-- <br/>Honesty-->
|
||||
<!-- <br/>Honesty-->
|
||||
</h1>
|
||||
<!-- <p class="panel-cover__subtitle panel-subtitle iUp">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>-->
|
||||
<!-- <p class="panel-cover__subtitle panel-subtitle iUp">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>-->
|
||||
<p class="panel-cover__subtitle panel-subtitle iUp"></p>
|
||||
<!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"-->
|
||||
<!-- height="350"></canvas>-->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/clock.js"></script>-->
|
||||
<!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"-->
|
||||
<!-- height="350"></canvas>-->
|
||||
<!-- <script src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/clock.js"></script>-->
|
||||
<hr class="iUp"/>
|
||||
<!--一言无法显示时的文字-->
|
||||
<p id="description" style="margin-top: 10%" class="panel-cover__description iUp">人生天地之间，若白驹之过隙，忽然而已。
|
||||
@@ -135,7 +137,8 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="navigation__item">
|
||||
<a href="https://www.linkedin.com/in/honesty861024" title="Linkedin" target="_blank">
|
||||
<a href="https://www.linkedin.com/in/honesty861024" title="Linkedin"
|
||||
target="_blank">
|
||||
<j class="fab fa-telegram-plane"></j>
|
||||
<span class="label">Linkedin</span>
|
||||
</a>
|
||||
@@ -149,7 +152,7 @@
|
||||
<li class="navigation__item">
|
||||
<a href="javascript:void(0)" class="moments-link"
|
||||
title="瞬间" target="_blank">
|
||||
<j class="fab fa-qq"></j>
|
||||
<j class="fab fa-friend"></j>
|
||||
<span class="label">瞬间</span>
|
||||
</a>
|
||||
</li>
|
||||
@@ -198,28 +201,34 @@
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 模拟iPhone 16容器 -->
|
||||
<div class="iphone-simulator">
|
||||
<!-- 模拟iPhone 16容器 -->
|
||||
<div class="iphone-simulator" style="display: none">
|
||||
<div class="dynamic-island">
|
||||
<p class="content"></p>
|
||||
</div>
|
||||
<div class="back-btn"></div>
|
||||
<div class="browser-view">
|
||||
<div class="close-btn"></div>
|
||||
<div class="skeleton"></div>
|
||||
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 遮罩层 -->
|
||||
<div class="overlay"></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/fetch.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/main.js?version=2"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/bj.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/moments.js"></script>
|
||||
<script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn" data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script>
|
||||
<!--黑暗主题-->
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/fetch.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/main.js?version=2"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/bj.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/moments.js"></script>
|
||||
<script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn"
|
||||
data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script>
|
||||
<script>
|
||||
// 百度站点统计
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
try {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e";
|
||||
@@ -229,21 +238,35 @@ var _hmt = _hmt || [];
|
||||
console.log("百度统计错误", e);
|
||||
}
|
||||
|
||||
})();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
|
||||
<!-- 先定义 gtag 函数作为安全兜底 -->
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
} catch (e) {
|
||||
console.log("Google Analytics Init 错误", e);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<!-- 再异步加载 Google 的 gtag.js -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
|
||||
|
||||
<!-- 可选：继续调用 config -->
|
||||
<script type="text/javascript">
|
||||
try {
|
||||
gtag('config', 'G-DYWDEVKDP0');
|
||||
} catch (e) {
|
||||
console.log("google ga error", e);
|
||||
console.error("Google Analytics config 失败", e);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--<script src="./js/StarrySky.js"></script>-->
|
||||
<!--<script src="./js/stars.js"></script>-->
|
||||
</body>
|
||||
|
||||
@@ -1,11 +1,41 @@
|
||||
$(document).ready(function () {
|
||||
function animateDynamicIsland(text = '正在加载...') {
|
||||
const island = document.querySelector('.dynamic-island');
|
||||
const content = island.querySelector('.content');
|
||||
|
||||
content.textContent = text;
|
||||
island.classList.add('expand');
|
||||
|
||||
setTimeout(() => {
|
||||
island.classList.remove('expand');
|
||||
}, 2000); // 2秒后收缩
|
||||
}
|
||||
|
||||
function openSimulator(url) {
|
||||
const sim = document.querySelector('.iphone-simulator');
|
||||
const iframe = document.getElementById('moment-frame');
|
||||
const skeleton = document.querySelector('.skeleton');
|
||||
const browserView = document.querySelector('.browser-view');
|
||||
|
||||
sim.style.display = 'block';
|
||||
document.querySelector('.overlay').style.display = 'block';
|
||||
|
||||
iframe.src = url;
|
||||
|
||||
iframe.onload = () => {
|
||||
setTimeout(() => {
|
||||
skeleton.style.display = 'none';
|
||||
browserView.classList.add('loaded');
|
||||
}, 300); // 延迟更自然
|
||||
};
|
||||
}
|
||||
|
||||
// 处理瞬间链接点击事件
|
||||
$('.moments-link').on('click', function (e) {
|
||||
e.preventDefault(); // 阻止默认跳转
|
||||
|
||||
// 获取链接地址
|
||||
var url = "https://moments.hehouhui.cn";
|
||||
console.log("当前用户UA-", navigator.userAgent)
|
||||
// 判断是否是移动端
|
||||
var isMobile = /iPhone|Android/i.test(navigator.userAgent);
|
||||
|
||||
@@ -13,24 +43,38 @@ $(document).ready(function () {
|
||||
// 移动端：直接跳转
|
||||
window.location.href = url;
|
||||
} else {
|
||||
animateDynamicIsland('正在加载瞬间...');
|
||||
// PC端：在模拟器中显示
|
||||
$('#moment-frame').attr('src', url);
|
||||
$('.iphone-simulator').show();
|
||||
$('.overlay').show();
|
||||
openSimulator(url);
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭按钮点击事件
|
||||
// 关闭按钮点击事件
|
||||
$('.close-btn').on('click', function () {
|
||||
$('.iphone-simulator').hide();
|
||||
$('.overlay').hide();
|
||||
$('.iphone-simulator').removeClass('visible');
|
||||
$('#moment-frame').attr('src', ''); // 清空iframe内容
|
||||
});
|
||||
|
||||
// 遮罩层点击事件
|
||||
// 遮罩层点击事件 点击空白处关闭模拟器
|
||||
$('.overlay').on('click', function () {
|
||||
$(this).hide();
|
||||
$('.iphone-simulator').hide();
|
||||
$('.iphone-simulator').removeClass('visible');
|
||||
$('#moment-frame').attr('src', '');
|
||||
});
|
||||
|
||||
const iframe = document.getElementById('moment-frame');
|
||||
document.querySelector('.back-btn').addEventListener('click', () => {
|
||||
try {
|
||||
// 安全地尝试让 iframe 内部回退
|
||||
if (iframe.contentWindow && iframe.contentWindow.history.length > 1) {
|
||||
iframe.contentWindow.history.back();
|
||||
}
|
||||
} catch (e) {
|
||||
// 跨域或权限问题
|
||||
console.error('无法回退：', e);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user