摘要:本次实战主要完成了照片墙动态效果的功能,通过引入annimate.css,在图片的点击事件时,清除图片之前的点击效果,再定义一个数组,用于存放动态效果的class,同时获取随机数,再通过addClass的方法把动态的添加动画效果。本次实战使用了es6的let声明变量和数组方法,也使用了额es6的拼接字符串的方法。实现代码如下:html>
本次实战主要完成了照片墙动态效果的功能,通过引入annimate.css,在图片的点击事件时,清除图片之前的点击效果,再定义一个数组,用于存放动态效果的class,同时获取随机数,再通过addClass的方法把动态的添加动画效果。
本次实战使用了es6的let声明变量和数组方法,也使用了额es6的拼接字符串的方法。实现代码如下:html>
照片墙动态效果*{margin: 0px;padding: 0px;}
.box{width: 1300px;margin: 50px auto;}
img{width: 300px;height: 200px;margin: 15px;}
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]}`);//添加数组中的随机动态效果
});
jpg:
2.jpg
3.jpg
批改老师:灭绝师太批改时间:2018-11-21 16:03:14
老师总结:非常好,把学到的东西放到自己的案例中,非常ok!继续