abstract：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>

效果圖

Correcting teacher：天蓬老師Correction time：2018-12-11 09:02:02
Teacher's summary：現(xiàn)在有一個(gè)趨勢(shì), 之前很多必須要通過(guò)javascript來(lái)實(shí)現(xiàn)的功能 ,越來(lái)越多的直接通過(guò)css來(lái)實(shí)現(xiàn)了