摘要：绑定在img上面的点击事件。我用了bind方法。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>照片墙</tit
绑定在img上面的点击事件。我用了bind方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="static/css/animate.min.css">
<script src="static/js/jquery.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
.content{width:1000px;margin:0px auto;background: #ccc;margin-top:30px;}
.pic{width:170px;height:85px;float:left;border:1px solid blue;margin:5px 10px;box-shadow: 10px 10px 5px #888888;}
.pic:hover img{
-webkit-transition: all .5s;
-webkit-transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<div><img src="static/images/3.jpg"></div>
<div><img src="static/images/4.jpg"></div>
<div><img src="static/images/3.jpg"></div>
<div><img src="static/images/4.jpg"></div>
<div><img src="static/images/3.jpg"></div>
<div><img src="static/images/4.jpg"></div>
<div><img src="static/images/3.jpg"></div>
<div><img src="static/images/4.jpg"></div>
<div><img src="static/images/3.jpg"></div>
<div><img src="static/images/4.jpg"></div>
</div>
<script type="text/javascript">
var ani=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble']
$('img').bind('click',function() {
$('img').removeClass();
//随机生成新的class
var rand=parseInt(Math.random()*7)
//animated是动画的基类
$(this).addClass('animated '+ani[rand])
})
</script>
</body>
</html>
批改老师：韦小宝批改时间：2019-02-19 17:58:00
老师总结：写的很不错 在前端中实际上有很多东西都是可以用多种语言来实现的 比如说这个照片墙，使用css3的动画也可以 当然使用js的也是可以
