Question

我有一些 div 元素。所有这些都应该在页面打开时滑入。其中三个水平滑动，一个垂直滑动。

        $(document).ready(function () {
            $("#lineHor1").toggle("slide");
            $("#lineHor2").toggle("slide");
            $("#lineHor3").toggle("slide");

            $("#lineVer1").slideToggle("slow");
        });

        .lineSliderHor {
            width: 1000px;
            height: 2px;
            background: #000000;
            display: none;
        }

        .lineSliderVer {
            width: 2px;
            height: 1000px;
            background: #000000;
            display: none;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
    <p>Click anywhere to toggle the box.</p>
    <div id="lineHor1" class="lineSliderHor"></div>
    <br />
    <div id="lineHor2" class="lineSliderHor"></div>
    <br />
    <div id="lineHor3" class="lineSliderHor"></div>

所以我的计划是在页面上使用这种行为作为动画。正如你可以看到 div 在垂直方向上滑动会强制所有其他 div 向下滑动。我希望所有的线都重叠。有没有办法实现这个目标？这样做是否合理，或者我应该使用画布来满足这种要求吗？

Answer 1

没有垂直线按下其他元素的最简单方法是使其位置绝对

        .lineSliderVer {
            ...
            position: absolute;
        }

片段

        $(document).ready(function () {
            $("#lineHor1").toggle("slide");
            $("#lineHor2").toggle("slide");
            $("#lineHor3").toggle("slide");

            $("#lineVer1").slideToggle("slow");
        });

        .lineSliderHor {
            width: 1000px;
            height: 2px;
            background: #000000;
            display: none;
        }

        .lineSliderVer {
            width: 2px;
            height: 1000px;
            background: #000000;
            display: none;
            position: absolute;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="lineVer1" class="lineSliderVer"></div>
    <p>Click anywhere to toggle the box.</p>
    <div id="lineHor1" class="lineSliderHor"></div>
    <br />
    <div id="lineHor2" class="lineSliderHor"></div>
    <br />
    <div id="lineHor3" class="lineSliderHor"></div>

Answer 2

您可以使用

position:absolute;

但这可能不会像你想要的那样表现，因为这会让div突破其父母约束。除非您使用：

position:relative;

在父div上。

如果您选择 position：absolute ，我更喜欢使用JQuery.animate();，因为您可以直接引用CSS属性（例如left或marginRight），并可以进行更多自定义滑动。

我希望这可以实现您正在寻找的东西。

如何防止滑动div移动其他元素？

2 个答案: