div上下キー、マウスmouseoverイベントを実現
3848 ワード
<html>
<head>
<title></title>
<style type="text/css">
div{
width:200px;
height:25px;
border:1px solid;
}
</style>
<script type="text/javascript">
// div
var isSelect=false;
function fun(obj)
{
alert(obj.value);
var t=document.getElementById("t");
var t_val=t.value;
if(t_val.length>5)
{
t.value=t_val.substring(0,5);
}
}
function fun1(obj)
{
obj.style.background="";
obj.blur();
isSelect=false;
}
function fun2(obj)
{
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
if(divs[i].style.background.length==7)
{
if(i != obj.getAttribute("id"))
{
divs[i].style.background="";
obj.style.background="#6699FF";
obj.focus();
break;
}
}
}
if(!isSelect)
{
obj.style.background="#6699FF";
obj.focus();
isSelect=true;
}
}
function fun3()
{
var divs=document.getElementsByTagName("div");
var len=divs.length;
for(var i=0;i<len;i++)
{
var divcolor=divs[i].style.background;
if(divcolor.length==7)
{
if(event.keyCode==38)
{
divs[i].style.background="";
if(i==0)
{
i=len;
}
divs[i-1].style.background="#6699FF";
divs[i-1].focus();
break;
}
if(event.keyCode==40)
{
divs[i].style.background="";
if(i==len-1)
{
i=-1;
}
divs[i+1].style.background="#6699FF";
divs[i+1].focus();
break;
}
}
}
if(!isSelect)
{
if(event.keyCode==38)
{
divs[len-1].style.background="#6699FF";
divs[len-1].focus();
isSelect=true;
}
if(event.keyCode==40)
{
divs[0].style.background="#6699FF";
divs[0].focus();
isSelect=true;
}
}
}
function fun4()
{
var d=document.getElementById("d");
d.focus();
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++)
{
divs[i].onkeyup=function(){fun3();}
}
}
</script>
</head>
<body onload="fun4()">
<div id="d" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d2" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d3" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d4" onmouseover="fun2(this)" onmouseout="fun1(this)"></div>
<div id="d5" onmouseover="fun2(this)" onmouseout="fun1(this)"></div><br>
<input id="t" type="text" onkeyup="fun3()">
<input type="button" value="" onclick="">
</body>
</html>