Question

我正在寻找这种template。将页面向左移动，然后向右移动页面。任何人都可以告诉我，我怎么能做到这一点，或者是否有任何与此类似的JavaScript示例。

Answer 1

创建两个<div>，将它们放在一起，让它们占据整个窗口，然后根据需要进行更改。

HTML：

<div class="left">left</div>
<div class="right">right</div>

CSS：

body {
    margin: 0;
}

.left {
    background-color: green;
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
    transition: width 1s;
    width: 0;
}

.left.active {
    width: 200px;
}

.right {
    background-color: red;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: left 1s;
}

.right.active {
    left: 200px;
}

JS（宽度jQuery）：

$('.right').on('click', function() {
    $('.left').toggleClass('active');
    $('.right').toggleClass('active');
});

这是一个fiddle。

Answer 2

如果您希望它在所有设备上平滑动画，您应该使用css过渡和变换。隐藏和显示就像切换课程一样基本。

The example in jsfiddle

<style media="screen">
  .wrapper {
    width: 100%;
    overflow: hidden;
  }

  .menu {
    height: 100vh;
    width: 100px;
    background: #ABC;
    color: white;
    position: absolute;
    left:0;
    transition: transform 0.3s;
    transform: translateX(-100px);
  }
  .content {
    transition: transform 0.3s;
  }

  .active .menu {
    transform: translateX(0);
  }

  .active .content {
    transform: translateX(100px);
  }
</style>

<button class="toggle">Toggle</button>
<div class="wrapper">
    <div class="menu">
        My menu
    </div>
    <div class="content">
        My content
    </div>
</div>
<script type="text/javascript">
  document.querySelector('.toggle').addEventListener('click', function(event) {
  event.preventDefault();
    document.querySelector('.wrapper').classList.toggle("active");
  });
</script>

NB！ IE10支持。 IE 9将支持没有动画，你可能应该添加所需的-ms-，-webkit-，-moz-等前缀，以支持转换和转换属性所需的旧浏览器。

另外，我建议不要使用此方法设置body或html的动画，并将页面内容放在包装器中（在示例中的.content中）。直接移动正文和html可能会导致令人不快的意外。

Answer 3

使用.toggle(effect,options,duration)方法将页面从左向右移动。

// Set the effect type
        var effect = 'slide';

        // Set the options for the effect type chosen
        var options = { direction: 'right' };

        // Set the duration (default: 400 milliseconds)
        var duration = 700;

        $('#Id').toggle(effect, options, duration);

通过此link

获取

将整个页面向左移动然后向右移动

3 个答案: