##背景 封樓期間難得空閑，也靜不下心學習，空閑之餘萌生了重做引導單頁的想法。因為之前都是扒站(某大公司游戲官網)+小改，一來雖然很炫酷，但本人水平有限，仍有很大一部分JS無從下手，甚至是看不懂|-_-|；二來對方畢竟沒有開源，無論道德還是法律都說不過去，所以……先從簡單處寫起，後續慢慢迭代吧！ # ...
背景
封樓期間難得空閑，也靜不下心學習，空閑之餘萌生了重做引導單頁的想法。因為之前都是扒站(某大公司游戲官網)+小改，一來雖然很炫酷，但本人水平有限，仍有很大一部分JS無從下手，甚至是看不懂|-_-|；二來對方畢竟沒有開源，無論道德還是法律都說不過去，所以……先從簡單處寫起，後續慢慢迭代吧！
大致佈局:Flex
參見 阮一峰Flex佈局教程
頭像部分
手殘黨，暫時沒有用CSS或者JS繪製特效，因為之前做頭像留著底圖，所以偷個懶。
CSS：滑鼠指針指向頭像切換gif，移開切換png。
JS：音樂播放切換gif，暫停切換png。
背景音樂部分
audio介面參見 HTML audio基礎API完全使用指南
我只迴圈播放了一首歌，所以隱藏audio主體美觀一些，然後控制按鈕交給頭像。有需要多首歌的，可以看一下開源的APlayer
遇到的問題:JS載入阻塞,獲取不到元素id
在實現頭像處滑鼠事件時，一直獲取不到頭像的id，但是控制台調試發現代碼無誤。原來由於JS的機制是單線程，所以先運行JS代碼，再構建相關DOM，需要在外部引用JS時加上屬性async,等構建完DOM再獲取。
<script src="./js/reashal.js" async="async"></script>
代碼部分
HTML部分
<!DOCTYPE html>
<html lang="chn">
<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,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>你聽|睿嶼青衫</title>
<meta name="author" content="reashal">
<meta name="description" content="不惦來路,輕裝且行">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="https://images.reashal.com/resources/avator/reashal.png">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://images.reashal.com/resources/js/music.js" async="async"></script>
</head>
<body>
<div class="box">
<div class="about" id="bor">
<img src="https://images.reashal.com/resources/avator/reashal.png" id="ava" title="點我有驚喜哦" alt="頭像/音樂控制項">
<div id="reashal">
<h2><b>睿嶼青衫</h2>
<p>不惦來路,輕裝且行</p>
<div class="fgx"></div>
<div class="icon">
<ul id="ctr">
<li><a href="https://www.reashal.com/" title="Home" target="blank"><i
class="fa fa-paper-plane fa-lg"></i></a></li>
<li><a href="https://www.reashal.com/index.php/cross.html" title="Mood" target="blank"><i
class="fa fa-pencil fa-lg"></i></a></li>
<li><a href="http://wpa.qq.com/msgrd?v=3&uin=532266666&site=ivrpano.com&menu=yes" title="QQ"
target="blank"><i class="fa fa-qq fa-lg"></i></a></li>
<li><a href="mailto:[email protected]" title="Mail" target="blank"><i
class="fa fa-envelope fa-lg"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<a target="_blank" href="https://beian.miit.gov.cn/">
<p>魯ICP備18004237號</p>
</a>
</div>
<div>
<!--滑鼠點擊泡泡特效-->
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://images.reashal.com/resources/js/djtx.js"></script>
</div>
<div>
<audio controls id="music" loop>
<source src="https://images.reashal.com/resources/music/LettingGo.mp3" type="audio/mpeg">
</audio>
</div>
</body>
</html>
CSS部分
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to right, #ec6fa3, #2f4af2);
}
.box {
position: fixed;
height: 100%;
width: 100%;
/* box鋪滿屏幕,需要html和body取消邊距 */
display: flex;
align-items: center;
justify-content: center;
/* 盒子內部水平垂直居中對齊 */
}
.about {
width: 70%;
max-width: 750px;
background-color: rgba(219, 245, 245, 0.1);
padding: 1%;
}
#ava {
display: block;
width: 100px;
height: 100px;
border: 2px solid #1eccef;
margin: auto;
margin-top: 3%;
border-radius: 100px;
}
#ava:hover {
content: url("https://images.reashal.com/resources/avator/dyAva.gif");
}
#reashal {
color: rgb(255, 255, 255);
text-align: center;
margin: auto;
}
.fgx {
height: 1px;
background-color: white;
}
ul,
li {
display: inline-block;
list-style: none;
padding: 1vh;
margin: auto;
}
i:hover {
color: #ec6fa3;
}
.footer {
bottom: 3%;
width: 100%;
position: fixed;
text-align: center;
}
a,
p {
color: white;
font-size: 16px;
text-decoration: none;
}
#music {
display: none;
}
JS部分
音樂部分
var x = document.getElementById('ava');
// 單擊頭像開始/暫停背景音樂
var music = document.getElementById('music');
x.onclick = function () {
if (music.paused) {
music.play();
}
else {
music.pause();
}
}
//播放音樂旋轉頭像
music.onplay = function () {
x.src = 'https://images.reashal.com/resources/avator/dyAva.gif';
x.title = '點擊暫停背景音樂';
}
//暫停音樂停止旋轉頭像
music.onpause = function () {
x.src = 'https://images.reashal.com/resources/avator/reashal.png';
x.title = '點擊開啟背景音樂';
}
點擊特效部分
不貼了，想要的自己從我這裡下載，別人寫的我也看不懂……
暫時完工
後續 想起什麼 學會點新東西再加
成品展示 以後慢慢 更新 吧
