简化版 分站 地图 日历 影视
计算器 行情 加解密 长度 面积
首页 软件 编程 笑话 知识 公告 注册 登录 用QQ登录本站
  •  
    您现在的位置:首页 >> JS >> 内容

    JS实现音乐钢琴特效

    内容摘要:!DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'titleTitle/titlestyle *{ margin: 0; padding: 0; } div{ height: 50px; width: 630px; /*background-color: red;*/ position: absolute;......

      <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    *{

    margin: 0;

    padding: 0;

    }

    div{

    height: 50px;

    width: 630px;

    /*background-color: red;*/

    position: absolute;

    top: 300px;

    left: 50%;

    transform: translateX(-50%);

    }

    ul{

    height: 100%;

    width: 100%;

    list-style: none;

    display: flex;

    overflow: hidden;

    border: 1px solid #000;

    }

    li{

    height: 100%;

    width: 100%;

    /*background-color: yellow;*/

    position: relative;

    border-right: 1px dashed #000;

    }

    li:last-child{

    border-right:none

    }

    span{

    width: 70px;

    height: 50px;

    background-color: skyblue;

    position: absolute;

    left: 0;

    top: 50px;

    z-index: -1;

    }

    a{

    text-decoration: none;color: #000;

    line-height: 50px;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    font-size: 20px;

    cursor: default;

    }


    </style>

    </head>

    <body>

    <div id="box">

    <ul id="ul">

    <li><a href="">1</a><span></span>

    <audio src="source/a1.mp3"></audio></li>

    <li><a href="">2</a><span></span>

    <audio src="source/a2.mp3"></audio></li>

    <li><a href="">3</a><span></span>

    <audio src="source/a3.mp3"></audio></li>

    <li><a href="">4</a><span></span>

    <audio src="source/a4.mp3"></audio></li>

    <li><a href="">5</a><span></span>

    <audio src="source/a5.mp3"></audio></li>

    <li><a href="">6</a><span></span>

    <audio src="source/a6.mp3"></audio></li>

    <li><a href="">7</a><span></span>

    <audio src="source/a7.mp3"></audio></li>

    <li><a href="">8</a><span></span>

    <audio src="source/a8.mp3"></audio></li>

    <li><a href="">9</a><span></span>

    <audio src="source/a9.mp3"></audio></li>

    </ul>

    </div>

    <script src="MyTools.js"></script>

    <script>

    var allLis = myTool.$('ul').children;

    document.addEventListener('keydown',function (ev) {

    var keyCode = ev['keyCode'] - 49;

    myTool.slowMoving(allLis[keyCode].children[1], {"top": 0}, function () {

    myTool.slowMoving(allLis[keyCode].children[1], {"top": 50});

    // 2.3 播音乐

    allLis[keyCode].children[2].play();

    allLis[keyCode].children[2].currentTime = 0;

    });

    },false);

    </script>

    </body>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2020/1/7 发布时间:15:31:42 点击:1531 
  • 上一篇:JS实现字体背景跑马灯
  • 下一篇:JavaScript实现PC端四格密码输入框功能
  • 本类新增
    本类热门文章
    Baidu
    壹 家 软 件 工 作 室(YiJia SoftWare Workroom) 齐天大圣® 制 作 ©2000-2020

    本空间由景安网络提供,百度云加速提供加速防护
    YiJiaCMS V3.31 Build 20.6.5(MSSQL) 闽ICP备05000814号-1