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

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

专注于为中小企业提供成都网站设计、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业汕头免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

主要使用了 cssanimate 属性

DOCTYPE html>
<html>
<head>
    <metacharset="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>
    <scriptsrc="js/jquery.min.js">script>
head>
<body>
    <inputtype="button" value="滑出" style=" width: 85px; height: 33px;" onclick="btnOut();" />
    <inputtype="button" value="滑入" style=" width: 85px; height: 33px;" onclick="btnIn();" />

    <divclass="Left">
        <ul>
            <li>左边列表li>
            <li>左边列表li>
            <li>左边列表li>
            <li>左边列表li>
        ul>
        <spanonclick="btnIn();">关闭span>
    div>

    <divid="main">
        <divclass="Right">
            <ul>
                <li>右边列表li>
                <li>右边列表li>
                <li>右边列表li>
                <li>右边列表li>
            ul>
            <spanonclick="btnIn();">关闭span>
        div>
    div>

    <divid="up">
        <ul>
            <li>上边列表li>
            <li>上边列表li>
            <li>上边列表li>
            <li>上边列表li>
        ul>
        <spanonclick="btnIn();">关闭span>
    div>

    <divid="mainDown">
        <divid="down">
            <ul>
                <li>下边列表li>
                <li>下边列表li>
                <li>下边列表li>
                <li>下边列表li>
            ul>
            <spanonclick="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>

名称栏目：JS 从屏幕上下左右滑入滑出效果
网页路径：http://kswsj.cn/article/dsopojo.html

关于创新互联

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

其他资讯