摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>animate動畫照片墻</title> <link rel="stylesheet" href="./stat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animate動畫照片墻</title>
<link rel="stylesheet" href="./static/css/style.css">
<link rel="stylesheet" href="./static/css/animate.min.css">
<script type="text/javascript" src="./static/js/jquery.js"></script>
</head>
<body>
<div>
<img src="./static/img/banner0.jpg" alt="">
<img src="./static/img/banner1.jpg" alt="">
<img src="./static/img/banner2.jpg" alt="">
<img src="./static/img/banner3.jpg" alt="">
<img src="./static/img/banner4.jpg" alt="">
<img src="./static/img/banner5.jpg" alt="">
<img src="./static/img/banner6.jpg" alt="">
<img src="./static/img/banner7.jpg" alt="">
<img src="./static/img/banner8.jpg" alt="">
<img src="./static/img/banner9.jpg" alt="">
<img src="./static/img/banner0.jpg" alt="">
<img src="./static/img/banner1.jpg" alt="">
<img src="./static/img/banner0.jpg" alt="">
<img src="./static/img/banner1.jpg" alt="">
<img src="./static/img/banner2.jpg" alt="">
<img src="./static/img/banner3.jpg" alt="">
<img src="./static/img/banner4.jpg" alt="">
<img src="./static/img/banner5.jpg" alt="">
<img src="./static/img/banner6.jpg" alt="">
<img src="./static/img/banner7.jpg" alt="">
<img src="./static/img/banner8.jpg" alt="">
<img src="./static/img/banner9.jpg" alt="">
<img src="./static/img/banner0.jpg" alt="">
<img src="./static/img/banner1.jpg" alt="">
</div>
</body>
<script type="text/javascript">
var img_attr = ['bounce','flash','bounceOut','hinge','rollIn','rollOut','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInUpLeft','rotateInUpRight'];
$('img').on('click',function(){
$('img').removeClass();
var attr_rand = parseInt(Math.random()*10);
$(this).addClass('animated '+ img_attr[attr_rand]);
})
</script>
</html>*{
margin: 0px;
padding: 0px;
}
.img{
margin: 20px auto;
margin-left: 130px;
}
.img img{
height: 100px;
width: 325px;
margin-left: 15px;
margin-top: 15px;
cursor: pointer;
}
$('img').on('click',function()}） 中的on表示在被選元素及子元素上添加一個或多個事件處理程序，on() 和 click() 的區(qū)別:二者在綁定靜態(tài)控件時沒有區(qū)別，但是如果面對動態(tài)產(chǎn)生的控件，只有 on() 能成功的綁定到動態(tài)控件中。
批改老師：滅絕師太批改時間：2019-03-23 13:17:46
老師總結(jié)：完成的不錯,還課外拓展了一點,學(xué)習(xí)習(xí)慣繼續(xù)保持哦!