<!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 38: //上
a = parseInt(a)-3;
c = $("img[picid=‘"+a+"‘]");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
case 40: //下
a = parseInt(a)+3;
c = $("img[picid=‘"+a+"‘]");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
case 37: //左
a = parseInt(a)-1;
c = $("img[picid=‘"+a+"‘]");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
case 39: //又
a = parseInt(a)+1;
c= $("img[picid=‘"+a+"‘]");
c.siblings().removeClass("selected")
c.addClass("selected")
break;
}
if(result==13){
var a1 = c.attr("title")
alert(a1)
}
});
})
</script>
</head>
<body>
<div class="box">
<h3>试题要求</h3>
<p>
1.请从下面的中选择你最喜欢的一个。<br />
2.通过上下左右四个按键进行选取。<br />
3.选择完毕后，按下enter键，以对话框的形式将其弹出来。<br />
4.提示：上下左右四个键的值分别为：38、40、37、39；回车键的值为：13；获取建值可以通过事件对象的which属性获取：event.which。
</p>
</div>
<div id="databox">
<img picid="1" src="Pictures/1.jpg" title="1" />
<img picid="2" src="Pictures/2.jpg" title="2" class="selected" />
<img picid="3" src="Pictures/3.jpg" title="3" />
<img picid="4" src="Pictures/4.jpg" title="4" />
<img picid="5" src="Pictures/5.jpg" title="5" />
<img picid="6" src="Pictures/6.jpg" title="6" />
<img picid="7" src="Pictures/7.jpg" title="7" />
<img picid="8" src="Pictures/8.jpg" title="8" />
<img picid="9" src="Pictures/9.jpg" title="9" />
</div>
</body>
</html>
时间： 2024-10-12 21:15:33