随机颜色方块图

来源：互联网发布：上海云计算大会董事长? 编辑：程序博客网时间：2024/05/16 09:07

html文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>technicolor_boxes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/technicolor.css"/>
<script type="text/javascript" src="js/technicolor_boxes.js"></script>
</head>
<body id="technicolor_boxes">
<div id="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
..........

<div class="clear"></div>
</div>
</body>
</html>

css文件：

body
{
height: 100%;
background-color: #101010;
}
#main
{
width: 918px;
margin: 0 auto;
}
.box
{
position:relative;
z-index: 1;
float: left;
height: 100px;
width: 100px;
background-color: #444;
}
.clear
{
clear: both;
}

js文件：

/**
* @author whl
*/
$(document).ready(function(){
function randomColor(){
return '#'+Math.random().toString(16).slice(2,8);
};
$(".box").on("mouseenter",function() {
$(this).css('background-color',randomColor());
$(this).css('box-shadow',"0 0 8px white");
$(this).css('z-index',"10000");
});
$(".box").on("mouseleave",function() {
$(this).css('box-shadow',"none");
$(this).css('z-index',"1");
})
})

0 0