照片墙动态效果

abstract：<!DOCTYPE html> <html> <head> <title>照片墙(CSS3动态效果)</title> <link rel="stylesheet" type="text/css" href="static/css/anima

<!DOCTYPE html>
<html>
<head>
	<title>照片墙(CSS3动态效果)</title>
	<link rel="stylesheet" type="text/css" href="static/css/animate.min.css">
    <link rel="shortcut icon"  href="static/images/logo.png" type="image/x-icon" />
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		.box{width: 1500px;margin: 50px auto;}
		img{width: 300px;height: 200px;margin: 10px;}
	</style>
	
</head>
<body>
 <div class="box">
	 <img src="static/images/1.jpg"/>
	 <img src="static/images/2.jpg"/>
	 <img src="static/images/3.jpg"/>
	 <img src="static/images/4.jpg"/>
	 <img src="static/images/5.jpg"/>
	 <img src="static/images/6.jpg"/>
	 <img src="static/images/7.jpg"/>
	 <img src="static/images/8.jpg"/>
 </div>
</body>
<script type="text/javascript">	
   var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
  $('img').on('click',function() {
		$('img').removeClass();
       	 //rand随机数字
   	 var rand=parseInt(Math.random()*10)
     //随机生成新class
     console.log(arr[rand])
     console.log(rand)
   	 $(this).addClass('animated '+arr[rand])
   
   })

</script>
</html>

```javascript

//animate自己做好的动画效果

var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']
$('img').on('click',function() {
$('img').removeClass();
//rand随机数字
var rand=parseInt(Math.random()*10)
//随机生成新class
$(this).addClass('animated '+arr[rand])

```

Correcting teacher：韦小宝Correction time：2018-11-27 09:11:21
Teacher's summary：嗯！不错写的很完整！这种小案例要多练才有效！课后记得多多练习！

照片墙动态效果

Popular Entries