abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css3照片墙</title> <link rel="stylesheet" type="text/css" href="./stati
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3照片墙</title>
<link rel="stylesheet" type="text/css" href="./static/css/animate.min.css">
<script type="text/javascript" src="jq.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
.box{width: 1500px;margin: 50px auto;}
img{width:300px;height:200px;margin:10px;}
}
</style>
</head>
<body>
<div class="box">
<img src="./static/images/1.jpg">
<img src="./static/images/2.jpg">
<img src="./static/images/3.jpg">
<img src="./static/images/4.jpg">
<img src="./static/images/5.jpg">
<img src="./static/images/6.jpg">
<img src="./static/images/7.jpg">
<img src="./static/images/8.jpg">
<img src="./static/images/9.jpg">
<img src="./static/images/10.jpg">
<img src="./static/images/11.jpg">
<img src="./static/images/12.jpg">
<img src="./static/images/13.jpg">
<img src="./static/images/14.jpg">
<img src="./static/images/15.jpg">
<img src="./static/images/16.jpg">
</div>
</body>
</html>
<script type="text/javascript">
var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
$('img').on('click',function(){
$('img').removeClass();
var rand = parseInt(Math.random()*10)
$(this).addClass('animated '+arr[rand])
})
</script>
Correcting teacher:西门大官人Correction time:2019-04-02 09:29:34
Teacher's summary:代码没有注释。建议写一下实现的思路,比如
1、预定义几个动画class
2、点击图片后,先移除所有图片的class
3、随机选一个动画class,加在当前点击的图片上