您的位置：首页 > Web前端 > JQuery

jQuery CSS3 照片墙

2015-08-24 16:35 597 查看 


<html>
<head>
<style type="text/css">
.picture-wall-container{
position: relative;
margin:100px;
}
.picture{
position: absolute;
padding:5px;
background-color: white;
box-shadow: gray 1px 1px 1px;
transition:transform 0.3s;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="picture-wall-container">
<img id="picture-1" class="picture" src="imgs/1.png" />
<img id="picture-2" class="picture" src="imgs/2.png" />
<img id="picture-3" class="picture" src="imgs/3.png" />
<img id="picture-4" class="picture" src="imgs/4.png" />
<img id="picture-5" class="picture" src="imgs/5.png" />

<img id="picture-6" class="picture" src="imgs/6.png" />
<img id="picture-7" class="picture" src="imgs/7.png" />
<img id="picture-8" class="picture" src="imgs/8.png" />
<img id="picture-9" class="picture" src="imgs/9.png" />
<img id="picture-10" class="picture" src="imgs/10.png" />

<img id="picture-11" class="picture" src="imgs/11.png" />
<img id="picture-12" class="picture" src="imgs/12.png" />
<img id="picture-13" class="picture" src="imgs/13.png" />
<img id="picture-14" class="picture" src="imgs/14.png" />
<img id="picture-15" class="picture" src="imgs/15.png" />
</div>
<script type="text/javascript">
function getRandom(min, max){
var r = Math.random()*(max-min)+min;
r = Math.ceil(r);
return r;
}
$(document).ready(function(){
var hcount = 5;
var vcount = 3;
var picWidth = 300;
var picHeight = 200;
var left = 0;
var top = 0;
var angles = [];
var zindexs = [];
for(var i = 1; i <= 5;i++){
left = left + picWidth - picWidth/3;
if(i == 1){
left = 0;
}
var picid = "#picture-" + i;
var zindex = getRandom(0,10)%3+1;
var angle = getRandom(5, 15);
var d = getRandom(0, 10);
if(d<=5){
angle *= -1;
}
$(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});
}
left = 0;
top = 2*picHeight/3;
for(i=6;i<=10;i++){
left = left + picWidth - picWidth/3;
if(i== 6){
left = 0;
}
picid="#picture-"+i;
zindex = getRandom(0,10)%3+1;
angle = getRandom(5, 15);
d = getRandom(0, 10);
if(d<=5){
angle *= -1;
}
$(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});
}
left = 0;
top = 4*picHeight/3;
for(i=11;i<=15;i++){
left = left + picWidth - picWidth/3;
if(i== 11){
left = 0;
}
picid="#picture-"+i;
zindex = getRandom(0,10)%3+1;
angle = getRandom(5, 15);
d = getRandom(0, 10);
if(d<=5){
angle *= -1;
}
$(picid).css({"left":left+"px","top":top+"px","z-index":zindex,"transform":"rotate("+angle+"deg)"});
}
$(".picture").each(function(index, item){
$(this).hover(function(){
angles[index] = $(this).css("transform");
zindexs[index] = $(this).css("z-index");
$(this).css({"z-index":4,"transform":"rotate(0deg)"});
},function(){
$(this).css({"z-index":zindexs[index],"transform":angles[index]});
});
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航