模拟360导航的钢琴效果实现

写的比较仓促,代码也比较简单,比较好实现

分两步.
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>


你可能感兴趣的:(HTML5)