照片墙作业练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3照片墙</title>
<link rel="stylesheet" type="text/css" href="./static/css/animate.min.css">
<script type="text/javascript" src="jq.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="./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>
</body>
</html>
<script type="text/javascript">
var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
$('img').on('click',function(){
$('img').removeClass();
var rand = parseInt(Math.random()*10)
$(this).addClass('animated '+arr[rand])
})
</script>
