<!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=utf-8" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript" language="javascript"></script>
<title>无标题文档</title>
<style type="text/css">
body {
background-color:#e9e9e9;
color:#333;
margin:0;
padding:0;
}
a, a:hover {
color:#333;
text-decoration:none;
}
.box {
width:960px;
height:450px;
margin:30px auto 0px;
font:0.75px;
position:relative;
background-color:#F90;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.pic {
display:block;
padding:10px 10px 15px;
text-align:center;
background:white;
border:1px solid #bfbfbf;
-webkit-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
-moz-box-shadow:2px 2px 3px rgba(135,139,144,0.4);
box-shadow:2px 2px 3px rgba(135,139,144,0.4);
-webkit-transition:all 0.5s ease-in;
position:absolute;
z-index:1;
}
.pic img {
display:block;
margin-bottom:10px;
border:0;
}
.pic:hover, .pic:focus, .pic:active {
border-color:#9a9a9a;
-webkit-transform:rotate(0deg) scale(1.05);
-moz-transform:rotate(0deg) scale(1.05);
transform:rotate(0deg) scale(1.05);
z-index:2;
-webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
-moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);
}
.pic1 {
bottom: 10px;
left: 100px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.pic2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.pic3 {
left: 350px;
top: 0;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.pic4 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.pic5 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.pic6 {
bottom: 60px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.pic7 {
bottom:0;
left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.pic8 {
bottom: -20px;
left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.pic9 {
top: 50px;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.pic10 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
</style>
<script>
$(function(){
var pics = "";
for(var i=1; i<10;i++){
var random_width = 100 +106*Math.random();
pics += '<a href="#" class="pic pic'+i+'"><img style="min-height:75px;" width="'+random_width+'" src="img/'+i+'.jpg" />图片'+i+'</a>';
}
$("#photo").html(pics);;
})
</script>
</head>
<body>
<div class="box">
<div id="photo">
</div>
</div>
</body>
</html>