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>

posted @ 2017-10-24 13:55  CC大神01  阅读(182)  评论(0)    收藏  举报