????：<!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
???? ??：這類(lèi)效果有奶很多現(xiàn)成的插件可以實(shí)現(xiàn)的更好, 咱們?yōu)槭裁匆獙W(xué)習(xí)呢, 主要是想了解實(shí)現(xiàn)原理, 實(shí)現(xiàn)個(gè)性化定rm制