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

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

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

模拟360导航的钢琴效果实现相关推荐

java钢琴键_javapiano Java Piano模拟钢琴效果的完整源码联合开发网 - pudn.com
javapiano 所属分类:Java编程开发工具:Java 文件大小:32KB 下载次数:10 上传日期:2014-04-15 21:09:50 上传者:王小强说明: Java Piano ...
iframe ajax上传,ajax--iframe模拟ajax文件上传效果
js无权读取本地的文件,so不能上传文件但是有这几种方法 1 iframe伪装 jquery-uploaded-file 2 swf插件 (这个不讲,是一个单独的软件 3 html5 iframe模 ...
[css] 请使用css3来模拟中/英文打字的效果
[css] 请使用css3来模拟中/英文打字的效果 :after 加个竖条闪啊闪,至于文字一个个出现嘛,text-indent 需要知道字数,clip-path 需要知道宽高,好像也没有特别好的办法. ...
html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
fcpx插件:21个模拟相机取景器数码屏显效果预设Camera Rec
fcpx插件:21个模拟相机取景器数码屏显效果预设Camera Rec是一套现在很流行的模拟相机取景器效果制作工具,包括有21种样式效果,并可通过参数调节画面的效果,如干扰.黑白.抖动和颜色等等,给创 ...
php下拉框选中效果,jquery模拟select下拉框效果
最近开发一网站的过程中碰到个需求,没有使用传统的select下拉框,而是使用了现代比较美观的一些元素设计了一个下拉框.对于这种东东,第一反应就是使用jquery来模拟了,还好,网上找了下,很快就找到了 ...
Android 应用开发----7. ViewPager+Fragment一步步打造顶部导航界面滑动效果
ViewPager+Fragment一步步打造顶部导航界面滑动效果在许多应用中,我们常常用到这么一个效果: 可以看到,由于现在的应用数据经常需要涉及到多个模块,所以常常需要使用滑动标签在多个页面之间 ...
css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLef ...
【前端】javascript实现导航栏筋斗云效果特效
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

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

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

模拟360导航的钢琴效果实现相关推荐

最新文章

热门文章