JS 从屏幕上下左右滑入滑出效果

2022-07-07 16:04:24 阅读：146 来源： 互联网

标签：function 列表 1500 滑入 position animate JS 上下左右 css

从屏幕上下左右滑入滑出效果，代码比较粗糙，但是效果已实现

需要注意的是，从屏幕右边和下边滑入的时候，需要给滑动的容器外面再加一个容器，加样式 position: fixed; 让它固定定位，否则页面右边和底部会出现滚动条

主要使用了 css animate 属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS 屏幕滑入滑出</title>
    <style>
        .Left {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            left: -260px;
            top: 400px;
        }

        .Right {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            right: -260px;
            top: 400px;
        }

        #main {
            width: 100%;
            position: fixed;
        }

        #up {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            top: -144px;
            left: 600px;
        }

        #down {
            width: 250px;
            border: 1px dashed red;
            background-color: aquamarine;
            position: absolute;
            transition: all 1s;
            bottom: -173px;
            left: 600px;
        }

        #mainDown {
            position: fixed;
            bottom: 0;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <input type="button" value="滑出" style=" width: 85px; height: 33px;" onclick="btnOut();" />
    <input type="button" value="滑入" style=" width: 85px; height: 33px;" onclick="btnIn();" />

    <div class="Left">
        <ul>
            <li>左边列表</li>
            <li>左边列表</li>
            <li>左边列表</li>
            <li>左边列表</li>
        </ul>
        <span onclick="btnIn();">关闭</span>
    </div>

    <div id="main">
        <div class="Right">
            <ul>
                <li>右边列表</li>
                <li>右边列表</li>
                <li>右边列表</li>
                <li>右边列表</li>
            </ul>
            <span onclick="btnIn();">关闭</span>
        </div>
    </div>

    <div id="up">
        <ul>
            <li>上边列表</li>
            <li>上边列表</li>
            <li>上边列表</li>
            <li>上边列表</li>
        </ul>
        <span onclick="btnIn();">关闭</span>
    </div>

    <div id="mainDown">
        <div id="down">
            <ul>
                <li>下边列表</li>
                <li>下边列表</li>
                <li>下边列表</li>
                <li>下边列表</li>
            </ul>
            <span onclick="btnIn();">关闭</span>
        </div>
    </div>
    <script>
        function btnOut() {
            $(".Left").animate({}, 1500, function () {
                $(".Left").css({ "left": "100px" });
            });

            $(".Right").animate({}, 1500, function () {
                $(".Right").css({ "right": "100px" });
            })

            $("#up").animate({}, 1500, function () {
                $("#up").css({ "top": "50px" });
            });

            $("#down").animate({}, 1500, function () {
                $("#down").css({ "bottom": "50px" });
            });
        }

        function btnIn() {
            $(".Left").animate({}, 1500, function () {
                $(".Left").css({ "left": "-260px" });
            });

            $(".Right").animate({}, 1500, function () {
                $(".Right").css({ "right": "-260px" });
            })

            $("#up").animate({}, 1500, function () {
                $("#up").css({ "top": "-144px" });
            });

            $("#down").animate({}, 1500, function () {
                $("#down").css({ "bottom": "-144px" });
            });
        }
    </script>
</body>
</html>

标签：function,列表,1500,滑入,position,animate,JS,上下左右,css
来源： https://www.cnblogs.com/liuchenxing/p/16454981.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS 从屏幕上下左右滑入滑出效果