From 3fb940e4f0bfafaeb6b566490c9a7619a511bfa9 Mon Sep 17 00:00:00 2001 From: gitee-bot Date: Mon, 30 Jun 2025 15:34:40 +0000 Subject: [PATCH] Update README.md --- README.md | 268 ++++++++---------------------------------------------- 1 file changed, 38 insertions(+), 230 deletions(-) diff --git a/README.md b/README.md index 53e07eb..eaf18af 100644 --- a/README.md +++ b/README.md @@ -1,232 +1,40 @@ # 钢琴小demo - ### 效果图如下： - ![](strar.gif) - ![](play.gif) - ### html代码 - ```angular2html - - - - - 钢琴 - - - - -
play
-
- -
- - - - -``` - ### css代码 - ```angular2html -*{ - margin: 0; - padding: 0; -} -.piano_video{ - width: 100%; - height: 100%; - position: relative; - z-index: 2; -} -#btn_play{ - position: absolute; - bottom: 50px; - right: 50px; - z-index: 3; - width: 80px; - height: 80px; - border-radius: 50%; - color:white; - border:2px solid white; - text-align: center; - line-height: 80px; - font-size: 24px; - cursor: pointer; -} -.whole{ - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - background: url("../assets/img/timg2.jpg"); - background-size: 100% 100%; -} -.whole>.piano_key{ - list-style: none; - width: 512px; - height: 244px; - margin:100px auto 0; -} -.whole>.piano_key>li{ - float: left; - width: 60px; - height: 240px; - border:2px solid #000000; - background:#ffffff; - text-align: center; - position: relative; -} -.whole>.piano_key>li>img{ - position: absolute; - top: 400px; - left: 0; - width: 60px; - opacity: 0; -} -.whole>.piano_key>li>div{ - width:30px; - height: 120px; - background: black; - position: absolute; - top: -2px; - right: -15px; - z-index: 1; -} -.li_mousedown{ - box-shadow: yellowgreen 0px 0px 10px 3px inset; -} -.whole>.piano_key>li>img.current{ - top: -200px; - transition: all 6s; -} -.whole>.piano_key>li>img.opcaity1{ - opacity: 1; -} -``` -### javascript代码 -```angular2html -'use strict'; -$(function () { - $("#btn_play").click(function () { - /** - * 点击按钮后隐藏视频和按钮本身 - * @type {jQuery.fn.init|jQuery|HTMLElement} - * @private - */ - var _t = $(this); - $("video").fadeOut(1500,function () { - }).get(0).pause(); - _t.fadeOut(1500); - }); - $(".piano_key>li").click(function () { - var _t = $(this); - _t.children("audio").get(0).play(); - if(_t.children("img").hasClass("current")){ - _t.children("img").removeClass("opcaity1 current"); - setTimeout(function () { - _t.children("img").addClass("opcaity1 current"); - },50) - }else { - _t.children("img").addClass("opcaity1 current"); - } - }); - $(".piano_key>li").mousedown(function () { - $(this).addClass("li_mousedown"); - }).mouseup(function () { - $(this).removeClass("li_mousedown"); - }); - /** - * - * @param keyCode Number - * @param isKeydown Boolean - */ - function pianoVoice(keyCode,isKeydown){ - switch (keyCode) { - //键盘1键 - case 49: - //键盘2键 - case 50: - //键盘3键 - case 51: - //键盘4键 - case 52: - //键盘5键 - case 53: - //键盘6键 - case 54: - //键盘7键 - case 55: - //键盘8键 - case 56: - var _li = $(".piano_key>li").eq(keyCode-49); - if(isKeydown){ - _li.addClass("li_mousedown") - .children("audio").get(0).play(); - if(_li.children("img").hasClass("current")){ - _li.children("img").removeClass("opcaity1 current"); - setTimeout(function () { - _li.children("img").addClass("opcaity1 current"); - },50) - }else { - _li.children("img").addClass("opcaity1 current"); - } - }else { - _li.removeClass("li_mousedown") - .children("audio").get(0).pause(); - _li.children("audio").get(0).load(); - } - break; - } - } - $(document).keydown(function (event) { - pianoVoice(event.keyCode,true); - }); - $(document).keyup(function (event) { - pianoVoice(event.keyCode,false); - }) -}); -``` +这是一个简单的钢琴网页应用，用户可以通过点击琴键或使用键盘来播放不同的音符。 + +## 功能特点 + +- 点击琴键播放对应的音符。 +- 使用键盘数字键（1-8）演奏对应的音符。 +- 点击“play”按钮可以隐藏视频背景和按钮本身。 +- 按下琴键时视觉效果变化，模拟真实按键体验。 + +## 技术实现 + +- **HTML**: 结构布局，包含视频背景、播放按钮和琴键。 +- **CSS**: 样式设计，包括琴键外观、动画效果等。 +- **JavaScript (jQuery)**: 实现交互逻辑，如点击事件、键盘事件处理。 + +## 使用方法 + +1. 打开 `index.html` 文件。 +2. 点击“play”按钮开始交互。 +3. 点击琴键或使用键盘上的数字键（1-8）来演奏音乐。 + +## 文件结构 + +- `index.html`: 主页面文件。 +- `css/index.css`: 样式文件。 +- `js/index.js`: 交互逻辑脚本。 +- `js/jquery-3.3.1.js`: jQuery库文件。 +- `assets/img/`: 存放图片资源。 +- `assets/mp3/`: 存放音频资源。 + +## 注意事项 + +- 确保所有资源文件路径正确。 +- 使用现代浏览器以获得最佳体验。 + +## 许可证 + +该项目遵循 MIT 许可证。详情请查看 LICENSE 文件。 \ No newline at end of file -- Gitee