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

本文主要是介绍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>