jQuery---钢琴案例 （按下1-9数字键，能触发对应的mouseenter事件）
钢琴案例
（按下1-9数字键，能触发对应的mouseenter事件）
1. 结合之前的学习，主要内容，就是on注册keyup事件，函数里传入e, 用e.keyCode，来获取1-9的数字的范围。
如果所按的按键在49-57的范围里，就去触发mouseenter(or mouseleave)事件。
怎么触发呢？让.nav li的索引下标等于（code-49）
2. 设置节流阀
//弹起的时候，触发mouseleave事件
$(document).on("keyup", function (e) {
// flag = true;
// //获取到按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
//触发对应的li的mouseleave事件
$(".nav li").eq(code - 49).mouseleave();
}
});
下面的代码是有bug的
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<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: white;
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>
<script src="../jquery-1.12.4.js"></script>
<script>
$(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();
// }
}
};
}); //弹起的时候，触发mouseleave事件
$(document).on("keyup", function (e) {
flag = true;
//获取到按下的键
var code = e.keyCode;
if (code >= 49 && code <= 57) {
//触发对应的li的mouseleave事件
$(".nav li").eq(code - 49).mouseleave();
}
});
});
</script>
</head> <body>
<div class="nav">
<ul>
<li>
<a href="javascript:void(0);">导航1</a>
<span></span>
</li>
<li><a href="javascript:void(0);">导航2</a><span></span></li>
<li><a href="javascript:void(0);">导航3</a><span></span></li>
<li><a href="javascript:void(0);">导航4</a><span></span></li>
<li><a href="javascript:void(0);">导航5</a><span></span></li>
<li><a href="javascript:void(0);">导航6</a><span></span></li>
<li><a href="javascript:void(0);">导航7</a><span></span></li>
<li><a href="javascript:void(0);">导航8</a><span></span></li>
<li><a href="javascript:void(0);">导航9</a><span></span></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>
</div>
</body> </html>
jQuery---钢琴案例 （按下1-9数字键，能触发对应的mouseenter事件）的更多相关文章
- Linux Vi/Vim 在插入模式下键盘右边数字键输入异常
问题:Linux在 Vi/Vim 在编辑文件时遇到一个问题,当我在 Insert 模式下进行修改文件内容的时候,用到了键盘(104键,右边带数字键那种)进行数字输入,当我输入数字 “5” 时,插入的数 ...
- jquery的change()：下拉框值改变时触发
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- jQuery 设置select，radio的值，无法自动触发绑定的change事件
一.问题 今天在对select和radio做change事件绑定后,手动设置其value值,但是不能触发change事件 二.解决 使用trigger方法手动触发
- 【ngx-ueditor】百度编辑器按下Shift键不触发contentChange事件
背景:基于Angular 6,引入ngx-ueditor 发现现象:如果以Shift键+任意键结尾,则ngModel会丢失包含shift键的字符 例如:输入“ABC+AB++++”,则ngModel中 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- jQuery常见案例
jQuery常见案例 通过jQuery实现全选,反选取消: 选择 地址 端口 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 1.1.1.1 80 代码实现 <body> ...
- jQuery常用案例总结
模态对话框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Jquery 分页案例
Jquery 分页案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
随机推荐
- 基于Arduino开发的简易“高水位报警系统解决方案”
长期以来,针对“某些办公室空调没有排水系统,只能用水桶接水,经常造成水漫金山的问题”而提出来的. 材料:Arduino开发板一块.水位传感器一个.高电平蜂鸣器一个.杜邦线若干. 原理:将水位传感器置于 ...
- Arduino系列之智能家居蓝牙语音遥控灯（四）
用到的材料 Arduino uno hc-05 蓝牙模块 安卓手机 安卓APP AMR—voice 通过安卓手机连接Arduino的蓝牙模块Hc-05,通过语音识别软件AMR-voice识别语音, ...
- ubuntu 14.04 如何设置静态ip
有线网络: 1. 找到文件并作如下修改: sudo vim /etc/network/interfaces 修改如下部分: auto eth0iface eth0 inet staticaddress ...
- Android Studio 学习笔记(三)：简单控件及实例
控件.组件.插件概念区分 说到控件,就不得不区分一些概念. 控件(Control):编程中用到的部件 组件(Component):软件的组成部分 插件(plugin): 应用程序中已经预留接口的组件 ...
- js 浏览器兼容问题及解决办法
JS中出现的兼容性问题的总结 1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题 我们都知道js通过style不可以获取行外样式,当我们需要获取行 ...
- Go语言实现：【剑指offer】数组中只出现一次的数字
该题目来源于牛客网<剑指offer>专题. 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 正常能想到哈希表来处理,但此题考查的是异或的知识, ...
- 关于线段树的感悟(Segment Tree)
线段树的感悟 : 学过的东西一定要多回头看看,不然真的会忘个干干净净. 线段树的 Introduction : English Name : Segment Tree 顾名思义 : 该数据结构由两个重 ...
- Unity酱~ 卡通渲染技术分析（二）
前面的话 上一篇Unity酱~ 卡通渲染技术分析(一) 写了CharaMain.cginc,服装的渲染是怎么实现的.这篇来分析一下头发跟皮肤的实现 头发 本来以为unitychan的头发会有各向异性的 ...
- 安装Debian的磨磨唧唧
安装Debian的磨磨唧唧 唆使VMware罢工的微软 这两天心血来潮想折腾,拆了我亲爱的Ubuntu.装个Debian 不过因为加入了微软的insider版本 就很尴尬的发现当我打开我的VMware ...
- 20200115--python学习第九天
今日内容 三元运算 函数 考试题 1.三元运算(又称三目运算) v= 前面 if 条件 else 后面 if 条件: v = '前面' else: v ='后面' 示例:让用户输入值,如果值是整数,则 ...