- A+
所属分类：Web前端
背景
封楼期间难得空闲，也静不下心学习，空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改，一来虽然很炫酷，但本人水平有限，仍有很大一部分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" alt="初踩坑JS加载与audio接口:点击头像开始/暂停背景音乐" 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 = '点击开启背景音乐'; } 点击特效部分
不贴了，想要的自己从我这里下载，别人写的我也看不懂……
