【jQuery05】通过按键 来切换 class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
body{font-size:12px;} .box{margin:10px;padding:10px;}
.box h3{margin:10px 0px;border-bottom:1px solid red;padding-bottom:10px;}
.box p{line-height:20px;} #databox{margin:10px auto;padding:10px;width:470px;border:5px solid pink;display:table;}
#databox img{float:left;border:5px solid #11cc99;width:130px;height:160px;margin:8px;}
#databox img.selected{border:5px solid red;} </style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
//38、40、37、39
$(function(){
$(window).keydown(function(event){
var a = $(".selected").attr("picid");
// var a = $("[class=selected]").attr("picid")
var c = $("img[picid="+a+"]");
var result = parseInt(event.keyCode) switch(result){
case : //上
a = parseInt(a)-;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //下
a = parseInt(a)+;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //左
a = parseInt(a)-;
c = $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break; case : //又
a = parseInt(a)+;
c= $("img[picid='"+a+"']");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
} if(result==){
var a1 = c.attr("title")
alert(a1)
}
}); })
</script> </head>
<body>
<div class="box">
<h3>试题要求</h3>
<p>
.请从下面的中选择你最喜欢的一个。<br />
.通过上下左右四个按键进行选取。<br />
.选择完毕后,按下enter键,以对话框的形式将其弹出来。<br />
.提示:上下左右四个键的值分别为:、、、;回车键的值为:;获取建值可以通过事件对象的which属性获取:event.which。
</p>
</div> <div id="databox"> <img picid="" src="Pictures/1.jpg" title="" />
<img picid="" src="Pictures/2.jpg" title="" class="selected" />
<img picid="" src="Pictures/3.jpg" title="" />
<img picid="" src="Pictures/4.jpg" title="" />
<img picid="" src="Pictures/5.jpg" title="" />
<img picid="" src="Pictures/6.jpg" title="" />
<img picid="" src="Pictures/7.jpg" title="" />
<img picid="" src="Pictures/8.jpg" title="" />
<img picid="" src="Pictures/9.jpg" title="" /> </div>
</body>
</html>
【jQuery05】通过按键 来切换 class的更多相关文章
- uCGUI 按键窗口切换机制(更新篇)
在之前文章中,讲述了一个低内存使用量的的窗口切换机制.有人会问,低内存使用量是多低呢,我这里举个例子.我有一个项目中使用到本切换机制,128*64的单色屏,初步计算有105个窗口(后面还会增加),总内 ...
- AT89S52汇编实现l通过按键中断切换led灯的四种闪烁模式(单灯左移,单灯右移,双灯左移,双灯右移)
;通过P1口控制8路LED的四种闪烁模式,单独LED灯左移,单独LED灯右移,相邻两个灯左移,相邻两个灯右移;通过一个外部中断0来检测按键的跳变沿来切换闪烁模式,第一次按键按下弹起,灯的闪烁状态由单独 ...
- uCGUI 按键窗口切换机制
前段时间在做一个窗口项目,这个项目菜单项过多,在管理起来比较麻烦.想做一个高效移植又方便的一个切换机制.后来在网上多方查找这方面资料,但是感觉比较少.后来自己整理出了这个结构,希望对后来朋友有所帮助. ...
- FPGA——按键(二)
直接上源码: module key_led( input sys_clk , //50Mhz系统时钟 input sys_rst_n, //系统复位,低有效 :] key, //按键输入信号 :] l ...
- 关闭shift中英文切换 英文代码/中文注释随意切换着写。
x 背景 写代码的时候总是意外的就切成中文了,特别是代码中大小写切换的这种情况... 例如:"public static TimeZone CurrentTime..."publi ...
- Win+Tab键实现自定义程序列表间的窗口切换
程序是用AutoHotkey语言写的, 说明: 以自己使用频率的顺序在ExeList自定义的程序间切换 切换可以以所有窗口切换,也可以按程序组切换(比如在word窗口间切换) 程序组可以分别定义排除的 ...
- C/C++使用keybd_event模拟键盘按键
#include <stdio.h> #include <Windows.h> /* 设置键盘大小写状态 big:为TRUE则切换大写状态,否则切换小写状态 */ VOID M ...
- VS MFC 按键导入BMP图片
1. 图片导入资源: 2.实现代码: 直接给CButton加图片的方法: 1.在资源编辑器中添加一个按钮.把它的Bitmap属性设为true 2.在按钮上点右键,添加一个变量m_Btn(CButton ...
- Win10 改为用 Ctrl+Shift 切换中英输入语言而不是 Win+空格
是切换中英输入语言,而不是切换输入法,如图: 步骤: 设置 > 设备 > 输入 > 高级键盘设置 > 语言栏选项 > 高级键盘设置 > 更改按键顺序 > 切换 ...
随机推荐
- TF基础3
批标准化 批标准化(batch normalization,BN)是为了克服神经网络层数加深导致难以训练而诞生的.深度神经网络随着深度加深,收敛会越来越慢,会导致梯度弥散问题(vanishing gr ...
- Pyhton学习——Day34
# 任何语言都会发生多线程,会出现不同步的问题,同步锁.死锁.递归锁# 异步: 多任务, 多个任务之间执行没有先后顺序,可以同时运行,执行的先后顺序不会有什么影响,存在的多条运行主线# 同步: 多任务 ...
- IOS - PDF合并
#pragma mark - Merge PDF - (void)mergePDF { NSArray *paths = NSSearchPathForDirectoriesInDomains(NSD ...
- JS中检测数据类型的多种方法
面试当中经常会问到检测 js 的数据类型,我在工作当中也会用到这些方法.让我们一起走起!!! 首先给大家上一个案例 console.log(typeof "langshen"); ...
- HDU-5534 Partial Tree 完全背包 设定初始选择
题目链接:https://cn.vjudge.net/problem/HDU-5534 题意 放学路上看到n个节点,突然想把这几个节点连成一颗树. 树上每个节点有一个清凉度,清凉度是一个关于节点度的函 ...
- python3 将两个列表生成一个字典
需求: 存在两个list如下 list1 = ["one", "two", "three"] list2 = ["1", ...
- fensorflow 安装报错 DEPENDENCY ERROR
1.错误信息 DEPENDENCY ERROR The target you are trying to run requires an OpenSSL implementation. Your sy ...
- SQL SERVER-identity | @@identity | scope_identity
主键自增 IDENTITY(1,1),MS SQL Server 使用 IDENTITY 关键字来执行 auto-increment 任务. 在上面的实例中,IDENTITY 的开始值是 1,每条新记 ...
- oracle 10g/11g 命令对照,日志文件夹对照
oracle 10g/11g 命令对照,日志文件夹对照 oracle 11g 中不再建议使用的命令 Deprecated Command Replacement Commands crs_st ...
- 从ORA-27300,ORA-27301到ORA-00064
近期因为session数量添加,须要调整session,也就是要调整process參数. 看是比較简单的一个问题,却遭遇了ORA-27300,ORA-27301.因为这个涉及到了有关内核參数k ...