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