钢琴版导航条案例

雨点打透心脏的1/2处 2023-06-25 07:42 20阅读 0赞

<!DOCTYPE html>

<html lang="en">

<head>

<title>Title</title>

<style>

\* \{

margin: 0;

padding: 0;

list-style: none;

.nav \{

width: 900px;

height: 60px;

background-color: black;

margin: 0 auto;

.nav li \{

width: 100px;

height: 60px;

/\*border: 1px solid yellow;\*/

float: left;

position: relative;

overflow: hidden;

.nav a \{

position: absolute;

width: 100%;

height: 100%;

font-size: 24px;

color: blue;

text-align: center;

line-height: 60px;

text-decoration: none;

z-index: 2;

.nav span \{

position: absolute;

width: 100%;

height: 100%;

background-color: yellow;

top: 60px;

</style>

$(function () \{

//给li注册鼠标进入事件,让li下面的span top：0  播放音乐

$(".nav li").mouseenter(function () \{

$(this).children("span").stop().animate(\{top: 0\});

//播放音乐

var idx = $(this).index();

$(".nav audio").get(idx).load();

$(".nav audio").get(idx).play();

\}).mouseleave(function () \{

$(this).children("span").stop().animate(\{top: 60\});

\});

//节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次

//1. 定义一个flag

var flag = true;

//按下1-9这几个数字键，能触发对应的mouseenter事件

$(document).on("keydown", function (e) \{

if(flag) \{

flag = false;

//获取到按下的键

var code = e.keyCode;

if(code >= 49 && code <= 57)\{

//触发对应的li的mouseenter事件

$(".nav li").eq(code - 49).mouseenter();

\});

$(document).on("keyup", function (e) \{

flag = true;

//获取到按下的键

var code = e.keyCode;

if(code >= 49 && code <= 57)\{

//触发对应的li的mouseenter事件

$(".nav li").eq(code - 49).mouseleave();

\});

//弹起的时候，触发mouseleave事件

\});

</script>

</head>

<body>

<div class="nav">

<ul>

<li>

<a href="javascript:void(0);">导航1</a>

</li>

</ul>

<div>

<audio src="mp3/1.ogg"></audio>

<audio src="mp3/2.ogg"></audio>

<audio src="mp3/3.ogg"></audio>

<audio src="mp3/4.ogg"></audio>

<audio src="mp3/5.ogg"></audio>

<audio src="mp3/6.ogg"></audio>

<audio src="mp3/7.ogg"></audio>

<audio src="mp3/8.ogg"></audio>

<audio src="mp3/9.ogg"></audio>

</div>

</body>

</html>

钢琴版导航条案例

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关钢琴版导航条案例

相关 Android实现简易版弹钢琴效果

相关导航条动态居中

相关 Bootstrap导航条

相关导航条的制作

相关导航条

相关【案例】百度新闻导航条

相关 html+css+js的钢琴案例

相关卡农D大调（钢琴版）

相关 Bootstrap3-导航条