2020-12-15

最新推荐文章于 2024-06-20 18:01:37 发布

xiu_45

最新推荐文章于 2024-06-20 18:01:37 发布

阅读量59

点赞数

文章标签：列表 css jquery

本文链接：https://blog.csdn.net/qq_45314540/article/details/111221827

版权

列表依次滑入显示

效果如下
效果图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{list-style-type: none;}
            body{background-color: #f4f4f4;margin:0;left: 0;top: 0;}
            #main_news_list{width:200px;position: fixed;bottom:30px;right: 30px;z-index: 99;}
            #main_news_list li{
                overflow:hidden;
                padding:10px;
                width:200px;
                height:60px;
                opacity: 1;
                margin-bottom:10px;
                border-radius: 5px;
                background-color: #ffffff;
                position: relative;
                border: 1px solid #ebeef5;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
				position: relative;
				top: 100vh;
            }
            #main_news_list li b{float:right;cursor: pointer;}
			#main_news_list .main_news_active{transition:all 1s;opacity: 1 !important;top: 0;}
        </style>
    </head>
    <body>
        <ul id="main_news_list">
            <li>列表依次进入1<b>X</b></li>
            <li>列表依次进入2<b>X</b></li>
            <li>列表依次进入3<b>X</b></li>
            <li>列表依次进入4<b>X</b></li>
            <li>列表依次进入5<b>X</b></li>
            <li>列表依次进入6<b>X</b></li>
            <li>列表依次进入7<b>X</b></li>
        </ul>
    </body>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var mainNewsList = $("#main_news_list li");
            var deleteArr = $("#main_news_list b");
            var bottomPx = 30;
            $.each(mainNewsList, function(i,ele) {
                var that = $(this);
                setTimeout(function(){
                    that.addClass('main_news_active');
                },500*i);
            });
            $.each(deleteArr, function(i,ele) {
                $(this).click(function(){
                    bottomPx += 90;
                    $("#main_news_list").animate({bottom:bottomPx+"px"});
                    var mainNewsListOli = $(this).parents("li");
                    mainNewsListOli.addClass('main_news_heightActive');
                    setTimeout(function(){
                        mainNewsListOli.remove();
                    },300);
                });
            });
        });
    </script>
</html>

xiu_45

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-15

列表依次滑入显示效果如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{list-style-type: none;} body{background-color: #f4f4
复制链接

扫一扫