css3照片墙动态效果
本次实战主要完成了照片墙动态效果的功能，通过引入annimate.css，在图片的点击事件时，清除图片之前的点击效果，再定义一个数组，用于存放动态效果的class，同时获取随机数，再通过addClass的方法把动态的添加动画效果。
本次实战使用了es6的let声明变量和数组方法，也使用了额es6的拼接字符串的方法。实现代码如下：
<!DOCTYPE html>
<html>
<head>
<title>照片墙动态效果</title>
<link rel="stylesheet" type="text/css" href="static/css/animate.min.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box{width: 1300px;margin: 50px auto;}
img{width: 300px;height: 200px;margin: 15px;}
</style>
</head>
<body>
<div class="box">
<img src="static/images/1.jpg"/>
<img src="static/images/2.jpg"/>
<img src="static/images/3.jpg"/>
</div>
</body>
<script type="text/javascript">
let arr=['bounce','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp'];//定义数组，用于存放动态效果的class类
$("img").click(function(){
$(this).removeClass();//先清空之前的动画效果
var radom=Math.floor(Math.random() * 7); //获取0-6的随机整数
$(this).addClass(`animated ${arr[radom]}`);//添加数组中的随机动态效果
});
</script>
</html>jpg:
2.jpg
3.jpg
