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

最新推荐文章于 2022-12-28 22:42:07 发布

opooc

最新推荐文章于 2022-12-28 22:42:07 发布

阅读量2.3k

点赞数

分类专栏： HTML5 文章标签： html css js 360导航钢琴效果

本文链接：https://blog.youkuaiyun.com/opooc/article/details/79614087

版权

HTML5 专栏收录该内容

6 篇文章

订阅专栏

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

分两步.
1在div上实现transiton，也就是使物块变化，
2在鼠标指向div时候，动态加载音乐，js部分还要控制在鼠标不在div上时，要停止音乐。

<!DOCTYPE html>
<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>