<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div1{ width:300px; height:80px; border:1px solid green;}
.div2{ width:300px; height:80px; border:1px solid red;}
.div3{ text-align:center; border-style:solid; border:1px; border-color:#66FF66;}
.divnum{ width:25px; height:20px; margin-left:5px; text-align:center; border:1px; border-style:solid; border-color:#6666FF; background-color:#CCCCCC; cursor:pointer; float:left;}
.div4{ width:50px; height:50px; z-index:10000; line-height:50px;text-align:center; border:1px; border-style:solid; border-color:#6666FF; background-color:#66CCCC; cursor:pointer; display:none;}
</style>
<script language="javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function init(){
initdivnum(5,25);
divmathrandom(25);
}
function initdivnum(hnum,countnum){ //hnum每行显示个数，countnum总共个数
for(var i=1;i<=countnum;i++){
if(i%hnum==0){
$("<div onclick=\"divmathrandom("+countnum+")\"></div>").attr({"id":i,"title":i,"class":"divnum"}).appendTo($("#div3"));
$("#div3").append("</br><br>");
}else{
$("<div onclick=\"divmathrandom("+countnum+")\"></div>").attr({"id":i,"title":i,"class":"divnum"}).appendTo($("#div3"));
}
}
var Color;
//var width;
//var height;
$("#div3 div").hover(
function(){
var domdiv=$(this).get(0);
Color=domdiv.style.backgroundColor;
width=domdiv.style.width;
//height=domdiv.style.height;
domdiv.style.backgroundColor="#6699ff";
//domdiv.style.width="50px";
//domdiv.style.height="50px";
//alert($(this).offset().left);
$("#div4").attr({"style":"display:block;"}).html($(this).get(0).innerHTML);
$("#div4").offset({left:$(this).offset().left-1,top:$(this).offset().top+$(this).outerHeight()});
//$("#div4").scrollLeft(300);
},
function(){
var domdiv=$(this).get(0);
domdiv.style.backgroundColor=Color;
//domdiv.style.width=width;
//domdiv.style.height=height;
$("#div4").attr({"style":"display:none;"});
}
);
}
function divmathrandom(conumnum){
var divnum=$("#div3").find("div");
var num={};
var randomnum;
for(var i=0;i<divnum.size();i++){
do{
randomnum=mathrandom(conumnum);
if(num[randomnum]==null){
num[randomnum]=randomnum;
break;
}
}while(num[randomnum]!=null);
divnum[i].innerHTML=num[randomnum];
}
}
function mathrandom(num){
return Math.floor(Math.random()*num+1);
}
//鼠标的移上移下效果
</script>
</head>
<body onload="init()">
<center>
<div id="div3" class="div3"></div>
<div id="div4" class="div4"></div>
</center>
</body>
</html>
