JavaScript实现点击鼠标弹钢琴的效果

shan33__

已于 2024-03-07 08:38:53 修改

阅读量637

点赞数 11

分类专栏：经典例题文章标签： javascript 前端开发语言弹钢琴 ecmascript html

于 2024-03-06 21:38:12 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/136518601

版权

本文介绍了如何使用HTML、CSS和JavaScript实现一个简单的网页功能，当鼠标在图片上按下时，根据图片与body的距离变化动态播放不同编号的音乐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：图片设置宽900px，找到鼠标按下时的x坐标和img距离body的x坐标，两个值相减，然后除100取整，赋值给a，通过判断a的值来确定放出那个音乐。

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 900px;
        }

        #box {
            margin: 100px auto;
            width: 900px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./keys.png" alt="">
    </div>
    <script>
        // 思路：图片设置宽900px，找到鼠标按下时的x坐标和img距离body的x坐标，两个值相减，然后除100取整ÿ

最低0.47元/天解锁文章