网站开发开发,建筑网站案例,django做网站怎样,一个app一年可以赚多少思路#xff1a; 图片设置宽900px#xff0c;找到鼠标按下时的x坐标和img距离body的x坐标#xff0c;两个值相减#xff0c;然后除100取整#xff0c;赋值给a#xff0c;通过判断a的值来确定放出那个音乐。
完整代码#xff1a;
!DOCTYPE html
html lan…思路 图片设置宽900px找到鼠标按下时的x坐标和img距离body的x坐标两个值相减然后除100取整赋值给a通过判断a的值来确定放出那个音乐。
完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}img {width: 900px;}#box {margin: 100px auto;width: 900px;position: relative;}/style
/headbodydiv idbox//将图片路径替换成自己的img src./keys.png alt/divscriptvar img document.querySelector(img);var box document.querySelector(#box);console.log(box, img);img.onmousedown function (e) {var x e.pageX - box.offsetLeft;console.log(x);var a parseInt(x / 100);console.log(a);//将mp3路径替换成自己的文件switch (a) {case 0:var audio new Audio(./钢琴9键-mp3/d1.mp3);audio.play();break;case 1:var audio new Audio(./钢琴9键-mp3/d2.mp3);audio.play();break;case 2:var audio new Audio(./钢琴9键-mp3/d3.mp3);audio.play();break;case 3:var audio new Audio(./钢琴9键-mp3/d4.mp3);audio.play();break;case 4:var audio new Audio(./钢琴9键-mp3/d5.mp3);audio.play();break;case 5:var audio new Audio(./钢琴9键-mp3/d6.mp3);audio.play();break;case 6:var audio new Audio(./钢琴9键-mp3/d7.mp3);audio.play();break;case 7:var audio new Audio(./钢琴9键-mp3/d8.mp3);audio.play();break;case 8:var audio new Audio(./钢琴9键-mp3/d9.mp3);audio.play();break;}}/script
/body/html
页面效果
