仿360导航条的小钢琴

作者: CondorHero | 来源:发表于2019-05-04 19:15 被阅读21次

仿360导航条的小钢琴
Tailwind Navbar
仿爱奇艺/腾讯视频ViewPager导航条实现
egret制作找礼物游戏
iOS隐藏导航条的坑
仿360开机
2019-01-16 uniapp隐藏H5的顶部导航条
Android开发(37) 使用DrawerLayout实现抽屉
iOS今日头条选择框、动画效果、FlappyBird游戏源码
【3班】Day1—仿写练习1

小钢琴
制成的图是GIF的，没有声音，真实的是有声音的，可以弹奏歌曲。
制成思路：

先从360网页中把音乐原件审查下载下来。
需要知道li:nth-child(1) 和 li::before两个CSS知识
audio标签

附上源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹钢琴</title>
    <style>
        ul {
            list-style: none;
            width: 990px;
            margin: 100px auto;
            overflow: hidden;
        }
        ul li {
            float: left;
            width: 100px;
            height: 30px;
            background-color: #eeddee;
            margin-right: 10px;
            position: relative;
        }
        li::before {
            content: "";
            width: 100%;
            height: 100%;
            background-color: red;
            position: absolute;
            top: 100%;
            transition: all 0.2s ease-out 0s;
        }
        li:nth-child(1)::before {
            background-color: #e4c533;
        }
        li:nth-child(2)::before {
            background-color: #f862da;
        }
        li:nth-child(3)::before {
            background-color: #ff9f64;
        }
        li:nth-child(4)::before {
            background-color: #15c3f5;
        }
        li:nth-child(5)::before {
            background-color: #23e631;
        }
        li:nth-child(6)::before {
            background-color: #747474;
        }
        li:nth-child(7)::before {
            background-color: #ff00ff;
        }
        li:nth-child(8)::before {
            background-color: #9dd6f4;
        }
        li:nth-child(9)::before {
            background-color: #db002f;
        }
        li:hover::before {
            top: 0;
        }
        li.cur::before {
            top: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="audios">
        <audio src="audio/a4.mp3"></audio>
        <audio src="audio/b4.mp3"></audio>
        <audio src="audio/c4.mp3"></audio>
        <audio src="audio/c5.mp3"></audio>
        <audio src="audio/d4.mp3"></audio>
        <audio src="audio/d5.mp3"></audio>
        <audio src="audio/e4.mp3"></audio>
        <audio src="audio/f4.mp3"></audio>
        <audio src="audio/g4.mp3"></audio>
    </div>
    <script>
        <!-- 得到li列表 -->
        var lis = document.getElementsByTagName("li");
        // 得到播放列表
        var audios = document.getElementsByTagName("audio");
        // 循环监听li事件
        for(var i=0;i<lis.length;i++){
            // 闭包的影响，编号
            lis[i].index = i;
            lis[i].onmouseover = function(){
                audios[this.index].load();//保持刚才的回音，立即开始新的声音
                audios[this.index].play();//播放
            }
        }
        // 键按下
        document.onkeydown = function(event){
            // event.keyCode键盘的ASCII码
            if(event.keyCode>48 && event.keyCode<58){
                audios[event.keyCode-49].load();//保持刚才的回音，立即开始新的声音
                audios[event.keyCode-49].play();//播放
                lis[event.keyCode - 49].className = "cur";//按下的颜色效果
            }
            
        }
        // 键抬起
        document.onkeyup = function(event){
            if(event.keyCode>48 && event.keyCode<58){
                lis[event.keyCode - 49].className = "";
            }
        }
    </script>
</body>
</html>

上传测试网页：
https://www.52world.club/study/index.html