事件绑定 照片墙

Original 2019-05-08 14:54:16 226
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equ

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<link rel="stylesheet" type="text/css" href="Animate.css/animate.min.css"/>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<title>作业</title>

<style type="text/css">

#body{margin-top: 100px;}

#body img{width:150px;height: 150px;}

</style>

<script type="text/javascript">

$(function(){

var arr=['bounce','flash','pulse','rubberBand','shake','swing','tada','bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig'];


$('#body img').on('click',function(){

$('img').removeClass();//清楚所有的图片claa类防止部分没有恢复

var l=parseInt(Math.random()*(arr.length));

var rad=arr[l];

$(this).addClass('animated '+rad);

})

})


</script>

</head>

<body>

 

<div id="body">

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

<img src="img/a.png" alt="" />

</div>

</body>

</html>


Correcting teacher:查无此人Correction time:2019-05-09 14:08:23
Teacher's summary:完成的不错。如果想固定图片与图片直接,宽高一样。就在img标签外,增加个div,设置宽高。继续加油。

Release Notes

Popular Entries