摘要：本次实战主要完成了照片墙动态效果的功能，通过引入annimate.css，在图片的点击事件时，清除图片之前的点击效果，再定义一个数组，用于存放动态效果的class，同时获取随机数，再通过addClass的方法把动态的添加动画效果。本次实战使用了es6的let声明变量和数组方法，也使用了额es6的拼接字符串的方法。实现代码如下：html>
本次实战主要完成了照片墙动态效果的功能，通过引入annimate.css，在图片的点击事件时，清除图片之前的点击效果，再定义一个数组，用于存放动态效果的class，同时获取随机数，再通过addClass的方法把动态的添加动画效果。
本次实战使用了es6的let声明变量和数组方法，也使用了额es6的拼接字符串的方法。实现代码如下：html>
照片墙动态效果
*{margin:0px;padding:0px;}
.box{width:1300px;margin:50pxauto;}
img{width:300px;height:200px;margin:15px;}
letarr=['bounce','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp'];//定义数组，用于存放动态效果的class类
$("img").click(function(){
$(this).removeClass();//先清空之前的动画效果
varradom=Math.floor(Math.random()*7);//获取0-6的随机整数
$(this).addClass(`animated${arr[radom]}`);//添加数组中的随机动态效果
});
jpg:
2.jpg
3.jpg
批改老师：灭绝师太批改时间：-11-21 16:03:14
老师总结：非常好，把学到的东西放到自己的案例中，非常ok!继续
