jquery 的animate广告动画效果

最新推荐文章于 2022-03-21 15:05:52 发布

蔡馨

最新推荐文章于 2022-03-21 15:05:52 发布

阅读量463

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/weixin_42805130/article/details/82495375

版权

web前端学习专栏收录该内容

63 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .contant{
            min-width: 1200px;
            position: relative;
            height: 0px;
            /*height: 150px;*/
            /*height: 450px;*/
            border: 1px solid red;
            box-sizing: border-box;
            overflow: hidden;
            /*display: none;*/
        }
        .contant .contant-img{
            width: 100%;
        }
        .contant .contant-img .img-a{
            position: absolute;
            width: 100%;
            left: 0px;
            top: 0px;
            z-index: 0;
        }
        .contant .contant-img .img-b{
            position: absolute;
            width: 100%;
            left: 0px;
            top: 0px;
            z-index: -1;
        }
        .contant-close{
            font-size: 27px;
            color: aliceblue;
            position: absolute;
            top: 10px;
            right: 30px;
            z-index: 2;
            cursor: pointer;
        }

    </style>
</head>
<body>


<div class="contant">
    <div class="contant-img">
        <div class="img-a">
            <a href=""><img src="public/imgs/big-xmg.jpg" alt=""></a>
        </div>

        <div class="img-b">
            <a href=""><img src="public/imgs/small-xmg.jpg" alt=""></a>
        </div>
    </div>
    <div class="contant-close">x</div>
</div>





<!--js-->
<script src="public/jquery-1.12.4.min.js"></script>

<script>

    $(function () {

        //折叠动画
        $(".contant").animate({height:"450px"},3000).delay(1000)
            .animate({height:"150px"},1000,function () {
                $(this).find(".img-b").css("z-index","1");
            });

        //关闭
        $(".contant-close").click(function () {
            $(".contant").css({display:"none"})
        });

    });


</script>



</body>
</html>

蔡馨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 的animate广告动画效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;广告动画&lt;/title&gt; &lt;style&gt; *{ margin: 0;
复制链接

扫一扫