js钢琴按钮波浪式图片排列效果代码分享
(编辑：jimmy 日期: 2025/7/1 浏览：3 次 )
本文实例讲述了js钢琴按钮波浪式图片排列效果。分享给大家供大家参考。具体如下：
这是一款基于javascript实现的钢琴按钮波浪式图片排列效果，鼠标在图片列表上移动，当前图片高亮显示，以此为根基点，周围的图片逐渐变小，所以有种手指划过钢琴键盘的感觉。
运行效果图： -------------------查看效果-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
注意：图片的alt属性不能缺少，否则将导致效果失败。
为大家分享的js钢琴按钮波浪式图片排列效果代码如下
head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js钢琴按钮波浪式图片排列效果</title>
<style>
#bookrack { width: 1200px; margin:100px auto; overflow:hidden;}
#bookrack a { text-align: center; text-decoration: none; font-size: 12px; }
#bookrack span { display: none; position: absolute; color: #fff; background-color: #000; background: rgba(0, 0, 0, 0.5); padding: 5px; top: 30px; left: 0; }
#bookrack span big { color: red; font-size: 14px; }
#bookrack img { width: 100%; height: 100%; display: block; border: 0; }
</style>
</head>
<body>
<!--代码部分begin-->
<div id="bookrack">
<a href="#" title=""><img src="/UploadFiles/2021-04-02/2.jpg">
以上就是为大家分享的js钢琴按钮波浪式图片排列效果代码，希望大家可以喜欢。
下一篇：javascript中alert()与console.log()的区别