基于JQuery的动画案例-手风琴、动态移动展示效果
以下是一个使用jQuery实现的动态手风琴效果的简化示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态手风琴</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="piano">
<div class="key" data-note="A"></div>
<!-- 其他键capsl -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS部分（style.css）：
#piano {
position: relative;
width: 600px;
height: 150px;
margin: 0 auto;
background: url('piano.png');
background-size: cover;
}
.key {
position: absolute;
top: 0;
width: 40px;
height: 150px;
background: white;
cursor: pointer;
transition: top 0.1s;
}
/* 其他键的样式 */JavaScript部分（script.js）：
$(document).ready(function() {
$('#piano').on('mousedown', '.key', function() {
var note = $(this).data('note');
playNote(note);
$(this).css('top', '30px');
}).on('mouseup mouseleave', '.key', function() {
$(this).css('top', 0);
stopNote($(this).data('note'));
});
function playNote(note) {
// 模拟音乐播放，这里可以使用Web Audio API或audio元素播放声音
console.log('Play ' + note);
}
function stopNote(note) {
// 模拟音乐停止
console.log('Stop ' + note);
}
});这个示例代码提供了基本的手风琴动画效果，当用户点击键时，键下移，并且模拟播放对应的音符。松开键后，键回到原位并模拟停止播放音符。这个示例假设你有一个piano.png的背景图片，展示了手风琴的外观，并且有对应的音频文件。在实际应用中，你需要替换图片，并使用Web Audio API或者<audio>元素来播放真正的声音。
评论已关闭