亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

照片墻效果案例制作

原創(chuàng) 2019-04-17 12:09:06 189
摘要:<!DOCTYPE html><html><head>    <title>照片墻(CSS3動態(tài)效果)</title>    <link rel="stylesheet" type="text/css" href=

<!DOCTYPE html>

<html>

<head>

    <title>照片墻(CSS3動態(tài)效果)</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"/>

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

<script type="text/javascript"> 

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

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

        $('img').removeClass();

  //隨機生成新的class

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

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

})


</script>

</html>



批改老師:天蓬老師批改時間:2019-04-17 13:54:25
老師總結(jié):估計實現(xiàn)的效果應(yīng)該很棒, 沒有圖片, 很遺憾, 下次記得放個圖片上來

發(fā)布手記

熱門詞條