照片墙CSS3动态效果

Original 2019-05-18 22:39:22 196
abstract:<!DOCTYPE html> <html> <head>     <title>照片墙(CSS3动态效果)</title>     <link rel="stylesheet" type="t
<!DOCTYPE html>
<html>
<head>
    <title>照片墙(CSS3动态效果)</title>
    <link rel="stylesheet" type="text/css" href="static/css/animate.min.css">
    <link rel="shortcut icon"  href="images/logo.ico" type="image/x-icon" />
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <style type="text/css">
        *{margin: 0px;padding: 0px;}
        .box{width: 1500px;margin: 50px auto;}
        img{width: 300px;height: 200px;margin: 10px;}
    </style>
    
</head>
<body>
<div class="box">
     <img src="images/1.jpg"/>
     <img src="images/2.jpg"/>
     <img src="images/3.jpg"/>
     <img src="images/4.jpg"/>
     <img src="images/5.jpg"/>
     <img src="images/6.jpg"/>
     <img src="images/7.jpg"/>
     <img src="images/8.jpg"/>
     <img src="images/9.jpg"/>
     <img src="images/10.jpg"/>
     <img src="images/11.jpg"/>
     <img src="images/12.jpg"/>
     <img src="images/13.jpg"/>
     <img src="images/14.jpg"/>
     <img src="images/15.jpg"/>
     <img src="images/16.jpg"/>
</div>
</body>
<script type="text/javascript"> 
var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
$('img').on('click',function() {
        $('img').removeClass();
  //随机生成新的class
  var rand=parseInt(Math.random()*10)
  $(this).addClass('animated '+arr[rand])
})

</script>
</html>


Correcting teacher:查无此人Correction time:2019-05-20 09:09:08
Teacher's summary:完成的不错。每行js语句结束增加;号。继续加油

Release Notes

Popular Entries