abstract：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墻</title> <script src="http://code.jquery.co
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墻</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="animate.min.css">
<style>
*{margin: 0;padding: 0;}
.box{width: 1200px;margin: 50px auto;background-color: #f2f2f2;}
img{width: 200px;height: 300px;margin: 10px;}
</style>
<script>
var arr = [
'animated flip',
'animated flipInX',
'animated flipInY',
'animated flipOutX',
'animated flipOutY',
'animated bounceOutUp',
'animated bounceOutRight',
'animated bounceOutLeft',
'animated bounceOutDown',
'animated bounceOut',
'animated fadeIn',
'animated fadeInDown',
'animated fadeInDownBig',
'animated fadeInLeft',
'animated fadeInLeftBig',
'animated fadeInRight',
'animated fadeInUpBig',
];
$(function(){
$('img').on('click', function(){
$('img').removeClass()
var rand = parseInt(Math.random()*16)
$(this).addClass(arr[rand])
})
})
</script>
</head>
<body>
<div class="box">
<img src="images/1.jpg" class="">
<img src="images/2.jpg" class="">
<img src="images/3.jpg" class="">
<img src="images/4.jpg" class="">
<img src="images/5.jpg" class="">
<img src="images/7.jpg" class="">
<img src="images/8.jpg" class="">
<img src="images/9.jpg" class="">
<img src="images/10.jpg" class="">
<img src="images/11.jpg" class="">
<img src="images/12.jpg" class="">
<img src="images/13.jpg" class="">
<img src="images/14.jpg" class="">
<img src="images/15.jpg" class="">
<img src="images/16.jpg" class="">
</div>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-05-27 09:11:49
Teacher's summary：這類效果有奶很多現(xiàn)成的插件可以實現(xiàn)的更好, 咱們?yōu)槭裁匆獙W習呢, 主要是想了解實現(xiàn)原理, 實現(xiàn)個性化定rm制