摘要:html代码<ul class="pic"> <li><img src="static/images/football1.jpg" alt=""></li> <
html代码
<ul class="pic"> <li><img src="static/images/football1.jpg" alt=""></li> <li><img src="static/images/football2.jpg" alt=""></li> <li><img src="static/images/football3.jpg" alt=""></li> <li><img src="static/images/football4.jpg" alt=""></li> <li><img src="static/images/football5.jpg" alt=""></li> <li><img src="static/images/football6.jpg" alt=""></li> <li><img src="static/images/football7.jpg" alt=""></li> <li><img src="static/images/football8.jpg" alt=""></li> <li><img src="static/images/football9.jpg" alt=""></li> <li><img src="static/images/football10.jpg" alt=""></li> </ul>
css代码
<style type="text/css"> li{margin:10px;float:left;list-style: none;} li,img{width: 200px;height: 250px;} </style>
js代码
<script type="text/javascript"> let randCss = ['bounce','flash','pulse','rubberBand','shake','swing','tada','wobble','bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp']; $('.pic img').on('click',function(){ $(this).removeClass(); let randNum = parseInt(Math.random()*randCss.length); $(this).addClass('animated '+randCss[randNum]); }); </script>
效果图
批改老师:天蓬老师批改时间:2018-12-11 09:02:02
老师总结:现在有一个趋势, 之前很多必须要通过javascript来实现的功能 ,越来越多的直接通过css来实现了