草庐IT

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

object0812 2023-03-28 原文

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

需要注意的是，从屏幕右边和下边滑入的时候，需要给滑动的容器外面再加一个容器，加样式 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>

 

滑入上下左右spancolorrgbaHTML5

有关JS 从屏幕上下左右滑入滑出效果的更多相关文章

  1. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  2. ruby - 在 Ruby 中，在类方法的上下文中，什么是实例变量和类变量？ - 2

    如果我有以下一段Ruby代码:classBlahdefself.bleh@blih="Hello"@@bloh="World"endend@blih和@@bloh到底是什么？@blih是Blah类中的一个实例变量，@@bloh是Blah类中的一个类变量，对吗？这是否意味着@@bloh是Blah的类Class中的一个变量？ 最佳答案 人们似乎忽略了该方法是类方法。@blih将是常量Bleh的类Class实例的实例变量。因此:irb(main):001:0>classBlehirb(main):002:1>defself.blehirb

  3. ruby - 在 Ruby 中的另一个上下文中评估潜在的相对 URI - 2

    我在Ruby程序中有两个URI。一个肯定是绝对URI，另一个可能是绝对URI或相对URI。我想在第一个的上下文中将第二个转换为绝对URI，所以如果第一个是http://pupeno.com/blog第二个是/about，结果应该是http://pupeno.com/about.有什么想法吗？ 最佳答案 Ruby的内置URI和Addressablegem，做这个简短的工作。我更喜欢Addressable，因为它功能更全面，但URI是内置的。require'uri'URI.join('http://pupeno.com/blog','/

  4. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  5. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  6. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  7. Ruby 将上下文分配给 lambda？ - 2

    是否可以不为lambda分配上下文？例如:classRuledefget_rulereturnlambda{putsname}endendclassPersonattr_accessor:namedefinit_rule@name="ruby"Rule.new.get_rule.call()#shouldsay"ruby"butsaywhatobjectofclassRull,doesnothavevariablename#orself.instance_eval&Rule.new.get_ruleendend我的目标是->没有上下文的存储过程对象，并在特定位置调用之前分配上下文。可能

  8. ruby - 在不同的文件中设置断点没有效果 - 2

    ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，

  9. ruby - 从上面的上下文返回 - 2

    这个问题的表述并不复杂，但我会尽力而为。通过我们的代码，我们有一些片段，例如response=do_something()returnresponseunlessresponse.ok?我想写一个包装器方法，这样就不需要这一步了，它看起来像这样defrr(&block)response=yieldunlessresponse.ok?#somehowdoreturnbutincontextabove(magicneededhere)endresponseend之后我就可以将上面的代码最小化为response=rr{do_something()}似乎不可能，但这是Ruby所以也许有办法吗？

  10. node.js - 从未编写过任何自动化测试，我应该如何开始行为驱动开发？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。多年来，我一直在使用多种语言进行编程，并且认为自己总体上相当擅长。但是，我从未编写过任何自动化测试:没有单元测试，没有TDD，没有BDD，什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

随机推荐