做一个简单的照片墙效果;

Original 2019-05-25 13:22:08 245
abstract:<style type="text/css">    *{margin: 0px;padding: 0px;}    .box{width: 1500px;margin: 50px auto;}    img{widt
<style type="text/css">
   *{margin: 0px;padding: 0px;}
   .box{width: 1500px;margin: 50px auto;}
   img{width: 300px;height: 200px;margin: 10px;}
   .box img{
      box-shadow: 1px 0px 10px 1px;
      border:1px solid #27A9E3;
   }
</style>
<div class="box">
 <img src="static/images/1.jpg"/>
 <img src="static/images/2.jpg"/>
 <img src="static/images/3.jpg"/>
 <img src="static/images/4.jpg"/>
 <img src="static/images/5.jpg"/>
 <img src="static/images/6.jpg"/>
 <img src="static/images/7.jpg"/>
 <img src="static/images/8.jpg"/>
 <img src="static/images/9.jpg"/>
 <img src="static/images/10.jpg"/>
 <img src="static/images/11.jpg"/>
 <img src="static/images/12.jpg"/>
 <img src="static/images/13.jpg"/>
 <img src="static/images/14.jpg"/>
 <img src="static/images/15.jpg"/>
 <img src="static/images/16.jpg"/>
</div>
<script type="text/javascript" src="static/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="static/css/animate.min.css">
<script type="text/javascript">
    // var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
    var arr=['bounce','flash']
  $('img').on('click',function() {
      $('img').removeClass();
        //随机生成新的class
        var rand=parseInt(Math.random()*2)
        $(this).addClass('animated '+arr[rand])
   
   })

</script>


Correcting teacher:天蓬老师Correction time:2019-05-25 17:26:34
Teacher's summary:放张图上来会看得更明白的, 不是吗?

Release Notes

Popular Entries