JQ 照片墙效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pic</title>
<link rel="stylesheet" href= "//cdn.bootcss.com/animate.css/3.5.2/animate.min.css">
<style>
*{margin:0;padding:0}
body{overflow: hidden;}
img{
background: #fff;
padding: 5px;
padding-bottom: 20px;
border:1px solid #fff;
box-shadow: 0 0 2px 2px #000;
text-align: center;
position: absolute;
z-index: 1;
transition: all 2s;
}
#pic1{
width:400px;
height:238px;
}
#pic2,#pic3,#pic8,#pic11{
width:400px;
height:250px;
}
#pic4{
width:400px;
height:400px;
}
#pic5{
width:400px;
height:237px;
}
#pic6{
width:400px;
height:240px;
}
#pic7,#pic12{
width:400px;
height:225px;
}
#pic9{
width:400px;
height:267px;
}
#pic10{
width:400px;
height:300px;
}
@keyframes picChange{
from{}
to{
transform:rotate(0deg);
transform:scale(2) translateX(5px);
left:550px;
top:250px;
}
}
</style>
</head>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<body>
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193125lwzftzlwwiwriwr6.jpg" alt="" id ="pic1" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193125xvq33v3val3waztp.jpg" alt="" id ="pic2" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193125zkym5tekzdk5dy5k.jpg" alt="" id ="pic3" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193126j1llyyib0en740mq.jpg" alt="" id ="pic4" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193130qzlzn8iic8tl42zi.jpg" alt="" id ="pic5" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193130ya99b909zrtltu9q.jpg" alt="" id ="pic6" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193126xr3r6lenaw2zf7or.jpg" alt="" id ="pic7" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193126yb4gidvdg4jlljd5.jpg" alt="" id ="pic8" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193126z7xqoqo77qjo9o9z.jpg" alt="" id ="pic9" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193126wdmop27dn9njp7gs.jpg" alt="" id ="pic10" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193127o4xxhdqpvdqdpxph.jpg" alt="" id ="pic11" />
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201610/28/193127tullr9ur80w9r08k.jpg" alt="" id ="pic12" />
</body>
<script>
$("img").each(function(index){
if(index<6){
$(this).css({
"left":index*200+"px",
"top":100+"px",
"transform":"rotate("+(index*(-10)+30)+"deg)"
})
this.leftNum = index*200;
this.topNum = 100;
this.degNum = index*(-10)+30;
}else{
$(this).css({
"left":(index-6)*200+"px",
"top":450+"px",
"transform":"rotate("+((index-6)*(-10)+30)+"deg)"
})
this.leftNum = (index-6)*200;
this.topNum = 450;
this.degNum = (index-6)*(-10)+30;
}
this.wid = this.offsetWidth;
this.hei = this.offsetHeight;
})
$("img").mouseover(function(){
$(this).css({
"box-shadow":"0 0 2px 2px #ccc"
})
})
$("img").mouseout(function(){
$(this).css({
"box-shadow":"0 0 2px 2px #000"
})
})
$("img").click(function(){
$("img").each(function(){
$(this).animate({
"left":this.leftNum+"px",
"top":this.topNum+"px",
"width":this.wid+"px",
"height":this.hei+"px"
})
this.style.zIndex = 1;
$(this).removeClass('animated rotateIn');
})
$(this).addClass('animated rotateIn');
this.style.animationDuration = "1s"
this.style.zIndex = 2;
$(this).animate({
"left":"450px",
"top":"250px",
"width":this.wid*1.5+"px",
"height":this.hei*1.5+"px"
})
})
</script>
</html>
