摘要：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
老師總結(jié)：現(xiàn)在有一個趨勢, 之前很多必須要通過javascript來實現(xiàn)的功能 ,越來越多的直接通過css來實現(xiàn)了