abstract：本次實戰(zhàn)主要完成了照片墻動態(tài)效果的功能，通過引入annimate.css，在圖片的點擊事件時，清除圖片之前的點擊效果，再定義一個數(shù)組，用于存放動態(tài)效果的class，同時獲取隨機數(shù)，再通過addClass的方法把動態(tài)的添加動畫效果。本次實戰(zhàn)使用了es6的let聲明變量和數(shù)組方法，也使用了額es6的拼接字符串的方法。實現(xiàn)代碼如下：<!DOCTYPE html> <html&
本次實戰(zhàn)主要完成了照片墻動態(tài)效果的功能，通過引入annimate.css，在圖片的點擊事件時，清除圖片之前的點擊效果，再定義一個數(shù)組，用于存放動態(tài)效果的class，同時獲取隨機數(shù)，再通過addClass的方法把動態(tài)的添加動畫效果。
本次實戰(zhàn)使用了es6的let聲明變量和數(shù)組方法，也使用了額es6的拼接字符串的方法。實現(xiàn)代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>照片墻動態(tài)效果</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'];//定義數(shù)組，用于存放動態(tài)效果的class類
$("img").click(function(){
$(this).removeClass();//先清空之前的動畫效果
var radom=Math.floor(Math.random() * 7); //獲取0-6的隨機整數(shù)
$(this).addClass(`animated ${arr[radom]}`);//添加數(shù)組中的隨機動態(tài)效果
});
</script>
</html>jpg:
2.jpg
3.jpg
Correcting teacher：滅絕師太Correction time：2018-11-21 16:03:14
Teacher's summary：非常好，把學(xué)到的東西放到自己的案例中，非常ok!繼續(xù)