サマリー：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>照片墻</title> <link rel="stylesheet" type="text/css&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片墻</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/style6.css">
<link rel="stylesheet" type="text/css" href="static/animate.min.css">
<script type="text/javascript" src="static/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<img src="static/images/zly/1.jpg" />
<img src="static/images/zly/2.jpg" />
<img src="static/images/zly/3.jpg" />
<img src="static/images/zly/4.jpg" />
<img src="static/images/zly/5.jpg" />
<img src="static/images/zly/6.jpg" />
<img src="static/images/zly/7.jpg" />
<img src="static/images/zly/8.jpg" />
<img src="static/images/zly/9.jpg" />
<img src="static/images/zly/10.jpg" />
</div>
</body>
<script type="text/javascript">
var arr=['bounce','bounceOutDown','bounceOutLeft','bounceOutRight','fadeOut','fadeOutDown','fadeOutLeftBig','fadeOutRight','rotateOutUpRight','bounce','rubberBand']
$('img').on('click',function(){
$('img').removeClass()
//隨機(jī)生成一個(gè)新的class
var rand = parseInt(Math.random()*10)
$(this).addClass('animated '+arr[rand])
setTimeout(function(){
$('img').removeClass('animated '+arr[rand]);
}, 1000);
})
</script>
</html>*{margin: 0px;padding: 0px;}
.box{width: 1500px;margin: 30px auto;}
img{width: 250px;height: 310px; margin: 5px;animate-duration: 2s;}拿來就用，方法很簡單，根據(jù)教程加了個(gè)定時(shí)器，解決效果實(shí)現(xiàn)后，圖片不顯示
添削の先生：天蓬老師添削時(shí)間：2018-12-31 16:10:54
先生のまとめ：圖片不錯(cuò),看來你是穎寶寶的粉絲,可惜人家嫁人要生孩子了