摘要：<!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>
批改老師：天蓬老師批改時間：2019-05-27 09:11:49
老師總結(jié)：這類效果有奶很多現(xiàn)成的插件可以實現(xiàn)的更好, 咱們?yōu)槭裁匆獙W(xué)習(xí)呢, 主要是想了解實現(xiàn)原理, 實現(xiàn)個性化定rm制