背景 封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无
封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分JS无从下手，甚至是看不懂|-_-|；二来对方毕竟没有开源，无论道德还是法律都说不过去，所以……先从简单处写起，后续慢慢迭代吧！
大致布局:Flex参见 阮一峰Flex布局教程
头像部分手残党，暂时没有用CSS或者JS绘制特效，因为之前做头像留着底图，所以偷个懒。
CSS：鼠标指针指向头像切换gif，移开切换png。
JS：音乐播放切换gif，暂停切换png。
audio接口参见 HTML audio基础API完全使用指南
我只循环播放了一首歌，所以隐藏audio主体美观一些，然后控制按钮交给头像。有需要多首歌的，可以看一下开源的APlayer
在实现头像处鼠标事件时，一直获取不到头像的id，但是控制台调试发现代码无误。原来由于JS的机制是单线程，所以先运行JS代码，再构建相关DOM，需要在外部引用JS时加上属性async,等构建完DOM再获取。
<script src="./js/reashal.js" async="async"></script>
<!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="http://img.558idc.com/uploadfile/allimg/boke/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="http://img.558idc.com/uploadfile/allimg/boke/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:88811@88.com" 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>
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("http://img.558idc.com/uploadfile/allimg/boke/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;
}
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 = '点击开启背景音乐';
}
不贴了，想要的自己从我这里下载，别人写的我也看不懂……
暂时完工后续 想起什么 学会点新东西再加
成品展示 以后慢慢 更新 吧