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