封楼期间难得空闲,也静不下心学习,空闲之余萌生了重做引导单页的想法。因为之前都是扒站(某大公司游戏官网)+小改,一来虽然很炫酷,但本人水平有限,仍有很大一部分JS无从下手,甚至是看不懂|-_-|;二来对方毕竟没有开源,无论道德还是法律都说不过去,所以……先从简单处写起,后续慢慢迭代吧!
参见 阮一峰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="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: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("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; }
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 = '点击开启背景音乐'; }
不贴了,想要的自己从我这里下载,别人写的我也看不懂……
后续 想起什么 学会点新东西再加
成品展示 以后慢慢 更新 吧