360ナビゲーションをシミュレートしたピアノ効果の実現
3951 ワード
書くのは比較的に急いで、コードも比較的に簡単で、比較的に実現しやすいです
2歩に分ける1 div上でtransitonを実現し、すなわちブロックを変化させ、2マウスがdivを指すとき、音楽を動的にロードし、js部分がマウスがdiv上にいないときに音楽を停止するように制御する.
2歩に分ける1 div上でtransitonを実現し、すなわちブロックを変化させ、2マウスがdivを指すとき、音楽を動的にロードし、js部分がマウスがdiv上にいないときに音楽を停止するように制御する.
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
div:hover
{
width:300px;
}
style>
head>
<body>
<div onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')"><audio id='mySound' src="C:\Users\Administrator\Desktop\opooc.mp3">audio>div>
<p> ， ， 。p>
body>
html>
<script>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
script>