摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3照片墙</title> <link rel="stylesheet" type="text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3照片墙</title>
<link rel="stylesheet" type="text/css" href="static/animate.min.css"/>
<style>
div{width:1400px;margin:20px auto;}
img {width:300px;height:300px;box-sizing: border-box;padding:5px;border:1px solid #ccc;margin:2px 3px;border-radius:4px;cursor: pointer;box-shadow:1px 0px 5px 1px #eae;transition: all .5s;}
img:hover{box-shadow:0 0 8px 1px #eee;border:1px solid #999;background-color:#fff;z-index: 99;}
</style>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div>
<img class="rotateLeft" src="images/1.jpg" alt="">
<img class="rotate" src="images/2.jpg" alt="">
<img class="rotateRight" src="images/3.jpg" alt="">
<img class="rotateRight" src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
<img class="scale" src="images/7.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/9.jpg" alt="">
<img class="scale" src="images/10.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/12.jpg" alt="">
<img class="scale" src="images/13.jpg" alt="">
<img src="images/14.jpg" alt="">
<img src="images/15.jpg" alt="">
<img class="scale animated" src="images/16.jpg" alt="">
</div>
<script type="text/javascript">
var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
$(function(){
$('img').removeClass();
//动态绑定事件on 'click'绑定的事件为点击事件
$('img').on('click',function(){
$(this).removeClass();
$(this).addClass('animated '+arr[Math.floor(Math.random()*arr.length)]);
});
});
</script>
</body>
</html>sd
批改老师：灭绝师太批改时间：2019-02-11 09:42:29
老师总结：使用animate动画库,完成页面中一些常见的动画效果没有问题,好好掌握哦
