HTML+CSS+JavaScript实现-自适应钢琴piano界面效果

2023-10-29 22:20

本文主要是介绍HTML+CSS+JavaScript实现-自适应钢琴piano界面效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

HTML+CSS+JavaScript实现-自适应钢琴piano界面效果

🦖我是Sam9029,一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你,若此文你认为写的不错,不要吝啬你的赞扬,求收藏,求评论,求一个大大的赞!👍**


已经晚上11点半了,此刻本人依旧无法入睡,

与其躺平在床,不如举头望明月

,啊,搞错了

不如下床思故乡

,啊,不不,不如下床燥起来,所以此刻为了入眠,本人想要听一听钢琴曲

所以既然如此,不如写一个出来

需求

需求 的却很简单,但依旧可以考验基础的掌握水平

  • 黑白键

    • 鼠标移动过后自动的伸长 和 缩回
  • 自适应屏幕大小

源码及效果

源码地址:

HTML+CSS+JavaScript实现-自适应钢琴piano界面效果 - 码上掘金 (juejin.cn)

此处演示效果不匹配(不知道是不是演示框被重写了 根字体大小),建议在自己的本地上使用代码演示

展示效果:


代码思路

记得需求的 两个 吗

先实现 自适应

在实现 琴键的伸缩

  • 自适应 的JS 代码
    • 使用 1024 来作为分界点,最大根字体100px
    • 其实用不到字体,主要是琴键长宽的改变
// 自适应 改变根字体大小
(function(doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function() {var clientWidth = docEl.clientWidth;if(!clientWidth) return;if(clientWidth >= 1024) {docEl.style.fontSize = '100px';} else {docEl.style.fontSize = 100 * (clientWidth / 1024) + 'px';}};if(!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window)

效果示意:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MsKDJcP6-1665224009538)(C:\Users\Administrator\Downloads\pianoRes02.gif)]

琴键的伸缩

  • 使用 CSS 写好默认是 动画 帧的演变
  • 黑白键 都是 先伸长 后缩短
    • 使用 关键帧来 设定
    • 分成了 0% 50% 100% 三个段
@keyframes blackMove {0%   {height:1.8rem;}50%  {height:2.6rem;}100% {height:1.8rem;}
}
@keyframes whiteMove {0%   {height:3.4rem;}50%  {height:4.4rem;}100% {height:3.4rem;}
}
  • 在使用js来控制 类名 和 动画属性
    • 这样可以同时控制 样式和动画效果
    • 因为 键的个数 数组,循环遍历来增加和删除类名
// 黑键
let blackKeyList = document.querySelectorAll('#blackKey>li')console.log(blackKeyList)blackKeyList.forEach(item => {item.onmouseenter = function(){item.style['animation-name'] = 'blackMove'item.style['animation-duration'] = '3s'setTimeout(function(){item.style['animation-name'] = ''item.style['animation-duration'] = ''},3000)}})
// 白键
let whiteKeyList = document.querySelectorAll('#whiteKey>li')
console.log(whiteKeyList)
whiteKeyList.forEach(item => {item.onmouseenter = function(){item.style['animation-name'] = 'whiteMove'item.style['animation-duration'] = '3s'setTimeout(function(){item.style['animation-name'] = ''item.style['animation-duration'] = ''},3000)}
})
  • HTML结构
    • 黑键 要 定位 在 白键的上面
    • 白键比 黑键 多出一个
<body>
<div id="pianoContainer"><ul id="blackKey"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><ul id="whiteKey"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></li></ul></div></body>

待改进

  • 本地实现声音的匹配
    • 鼠标滑动某个键时,出现对应的琴键声音

🦖我是Sam9029,一个前端

文章若有错误,敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你,都看到这了,求收藏,求评论,求一个大大的赞👍!不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主


这篇关于HTML+CSS+JavaScript实现-自适应钢琴piano界面效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/m0_61486963/article/details/127213725
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/303735

相关文章

基于Python实现一个图片拆分工具

《基于Python实现一个图片拆分工具》这篇文章主要为大家详细介绍了如何基于Python实现一个图片拆分工具,可以根据需要的行数和列数进行拆分,感兴趣的小伙伴可以跟随小编一起学习一下... 简单介绍先自己选择输入的图片,默认是输出到项目文件夹中,可以自己选择其他的文件夹,选择需要拆分的行数和列数,可以通过

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

Java操作Word文档的全面指南

《Java操作Word文档的全面指南》在Java开发中,操作Word文档是常见的业务需求,广泛应用于合同生成、报表输出、通知发布、法律文书生成、病历模板填写等场景,本文将全面介绍Java操作Word文... 目录简介段落页头与页脚页码表格图片批注文本框目录图表简介Word编程最重要的类是org.apach

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员(如字段、方法、类等)的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断