背景
封樓期間難得空閑，也靜不下心學習，空閑之余萌生了重做引導單頁的想法，因為之前都是扒站(某大公司游戲官網)+小改，一來雖然很炫酷，但本人水平有限，仍有很大一部分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="https://www.cnblogs.com/reashal/p/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="https://www.cnblogs.com/reashal/p/css/style.css">
<link rel="shortcut icon" href="https://img.uj5u.com/2022/04/16/307588160717331.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 >
<div id="bor">
<img src="https://img.uj5u.com/2022/04/16/307588160717331.png" id="ava" title="點我有驚喜哦" alt="頭像/音樂控制元件">
<div id="reashal">
<h2><b>睿嶼青衫</h2>
<p>不惦來路,輕裝且行</p>
<div ></div>
<div >
<ul id="ctr">
<li><a href="https://www.reashal.com/" title="Home" target="blank"><i
></i></a></li>
<li><a href="https://www.reashal.com/index.php/cross.html" title="Mood" target="blank"><i
></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 ></i></a></li>
<li><a href="mailto:[email protected]" title="Mail" target="blank"><i
></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div >
<a target="_blank" href="https://beian.miit.gov.cn/">
<p>魯ICP備18004237號</p>
</a>
</div>
<div>
<!--滑鼠點擊泡泡特效-->
<canvas 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://img.uj5u.com/2022/04/16/307588160717332.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://img.uj5u.com/2022/04/16/307588160717332.gif';
x.title = '點擊暫停背景音樂';
}
//暫停音樂停止旋轉頭像
music.onpause = function () {
x.src = 'https://img.uj5u.com/2022/04/16/307588160717331.png';
x.title = '點擊開啟背景音樂';
}
點擊特效部分
不貼了，想要的自己從我這里下載，別人寫的我也看不懂……
暫時完工
后續 想起什么 學會點新東西再加
成品展示 以后慢慢 更新 吧
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458301.html
標籤：Html/Css