照片墙作业练习

Original 2019-04-01 10:27:46 359
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>css3照片墙</title> <link rel="stylesheet" type="text/css" href="./stati

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3照片墙</title>

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

    <script type="text/javascript" src="jq.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">

    <img src="./static/images/9.jpg">

    <img src="./static/images/10.jpg">

    <img src="./static/images/11.jpg">

    <img src="./static/images/12.jpg">

    <img src="./static/images/13.jpg">

    <img src="./static/images/14.jpg">

    <img src="./static/images/15.jpg">

    <img src="./static/images/16.jpg">

    </div>

</body>

</html>

<script type="text/javascript">

    var arr=['bounce','flash','pulse','rubberBand','shakeswing','tadaw','obble','bounceInLeft','bounceInRight','bounceInUp']

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


    $('img').removeClass();

    var rand = parseInt(Math.random()*10)

    $(this).addClass('animated '+arr[rand])


    })

</script>

Correcting teacher:西门大官人Correction time:2019-04-02 09:29:34
Teacher's summary:代码没有注释。建议写一下实现的思路,比如 1、预定义几个动画class 2、点击图片后,先移除所有图片的class 3、随机选一个动画class,加在当前点击的图片上

Release Notes

Popular Entries