布局与动画实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Null_Robot/article/details/107764451

tab栏切换

进行一个简单的布局

<div class="box">
    <div class="box1">
        <div class="child r1"></div>
    </div>
    <div class="box2">
        <div class="child r2"></div>
    </div>
    <div class="box3">
        <div class="child r3"></div>
    </div>
</div>

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 300px;
            height: 250px;
            margin: 0 auto;
        }

        .box1, .box2, .box3 {
            position: absolute;
            left: 0;
            width: 300px;
            height: 150px;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .box1 {
            top: 0;
            z-index: 1;
            background-color: #009fff;
            border: 1px solid #009fff;
        }

        .box2 {
            top: 50px;
            z-index: 2;
            background-color: #ff8850;
            border: 1px solid #ff8850;
        }

        .box3 {
            top: 100px;
            z-index: 3;
            background-color: #89df9b;
            border: 1px solid #89df9b;
        }

        .child {
            position: absolute;
            display: none;
            top: 150px;
            width: 300px;
            height: 150px;
            border-radius: 0 0 10px 10px;
            background-color: #fff;
            box-sizing: border-box;
        }

        .r1 {
            border: 1px solid #009fff;
        }

        .r2 {
            border: 1px solid #ff8850;
        }

        .r3 {
            border: 1px solid #89df9b;
        }
    </style>

引入jquery框架，书写script代码

<script src="js/jquery-1.9.1.js"></script>
<script>
    $(".box>div").click(function () {
        $(this).animate({
            top: 0
        }, 300).find(".child").slideDown(300).parent().siblings().children().slideUp(300);
        $(this).siblings().each(function (index) {
            $(this).animate({
                top: 340 + index * 50
            }, 300);
        });
    });
</script>

实现效果
在这里插入图片描述

王者荣耀手风琴菜单

布局，和书写样式

<div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>

书写动画效果

 <script src="./js/jquery-3.4.1.min.js"></script>
    <script>
         $(function() {
            // 鼠标经过某个小li 有两步操作：
            // $(".king li").mouseenter(function() {
            //     // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
            //     $(this).stop().animate({
            //         width: 224
            //     }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            //     // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
            //     $(this).siblings("li").stop().animate({
            //         width: 69
            //     }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            // })
            $(".king li").mouseenter(function(){
                $(this).stop().animate({
                    width:224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn()
                $(this).siblings("li").stop().animate({
                    width:69
                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    </script>

实现效果
在这里插入图片描述

淡入淡出效果的轮播图

布局

<div class="box">
    <div class="list">
        <img src="./image/1.jpg" alt=""/>
        <img src="./image/2.jpg" alt=""/>
        <img src="./image/3.jpg" alt=""/>
        <img src="./image/4.jpg" alt=""/>
        <img src="./image/5.jpg" alt=""/>
    </div>
    <div class="dian">
        <div class="sel"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            margin: 0 auto;
            width: 500px;
            height: 300px;
        }
        .list{
            position: relative;
            margin: 0 auto;
            width: 500px;
            height: 300px;
        }
        .list > img {
            position: absolute;
            width: 500px;
            height: 300px;
        }
        .dian{
            position: absolute;
            z-index: 10;
            width: 100%;
            height: 0;
            bottom: 20px;
            text-align: center;
        }
        .dian>div{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #000;
            border: 1px solid #fff;
        }
        .sel{
            background-color: red;
        }
    </style>

实现动画效果

<script src="js/jquery-1.9.1.js"></script>
<script>
    $(function () {
        //分层
        var timer = null;
        var speed = 2000;
        var fade = 1000;
        var ele = $(".list>img");
        var par=$(".list");
        var index=0;
        ele.eq(0).show().siblings().hide();
        ele.each(function (index) {
            $(this).css("zIndex", ele.length - index - 1);
        });
        timer = setInterval(animate, speed);
        function animate() {
            changepos();
            index++;
            if(index>$(".dian>div").length-1)
            {
                index=0;
            }
            $(".dian>div").eq(index).addClass("sel").siblings().removeClass("sel");
        }
        function changepos(){
            $(".list>img").eq(0).fadeOut(fade, function () {
                $(this).appendTo(par);
            });
            $(".list>img").eq(1).fadeIn(fade);
        }
        $(".dian>div").mouseenter(function (){
            $(this).addClass("sel").siblings().removeClass("sel");
            var cindex=$(this).index();
            var count=0;
            if(cindex-index>0)
            {
                count=cindex-index;
            }
            else if(cindex-index<0)
            {
                count=$(".dian>div").length+(cindex-index);
            }
            for(var i=0;i<count;i++)
            {
                $(".list>img").eq(0).fadeOut().appendTo(par);
            }
            $(".list>img").eq(0).stop(false,true).fadeIn(fade);
            index=cindex;
        });
        $(".box").mouseenter(function (){
            clearInterval(timer);
        }).mouseleave(function () {
            timer = setInterval(animate, speed);
        });
    });

</script>