事件绑定 照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="Animate.css/animate.min.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<title>作业</title>
<style type="text/css">
#body{margin-top: 100px;}
#body img{width:150px;height: 150px;}
</style>
<script type="text/javascript">
$(function(){
var arr=['bounce','flash','pulse','rubberBand','shake','swing','tada','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig'];
$('#body img').on('click',function(){
$('img').removeClass();//清楚所有的图片claa类防止部分没有恢复
var l=parseInt(Math.random()*(arr.length));
var rad=arr[l];
$(this).addClass('animated '+rad);
})
})
</script>
</head>
<body>
<div id="body">
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
<img src="img/a.png" alt="" />
</div>
</body>
</html>