9

我正在尝试重新创建他们在 gimmebar.com 上已经完成的东西。

单击图像时，内容当前页面向左滑出并淡出。目标页面从右侧淡入并滑入。

我已经尝试了几件事，比如在一个宽度为 200% 的容器中创建两个 div，然后滚动内容以查看和使用 JqueryUI 并滑动 div。滚动失败，div 根本不移动，无论如何 srollLeft 始终为 0。幻灯片效果更好一些，但对我来说，它们似乎不是同时运行的。第二个 div 只是突然出现，而不是很好地滑入第一个后面。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>slide demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    .container {
        width: 100%;
        float: left;
        height: 800px;
    }
    #one {
        background-color: red;
    }
    #two {
        background-color: #333;
        display: none;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
    <div class="container" id="one"></div>
    <div class="container" id="two"></div>
<script>
$( document ).click(function() {
          $("#one").hide("slide", { direction: "left" }, 1000);
          $("#two").show("slide", { direction: "left" }, 1000);
});
</script>
</body>
</html>

似乎它应该很容易实现，但我被卡住了。

小心。

编辑：我有点让它工作，正如你在这个小提琴中看到的那样。幻灯片在那里，但我看不到褪色。也可能有更好的方法来实现这一点，但我很满意不必加载第三个库/插件只是为了滑动一个 div。

http://webadvent.org/2012/css-sliding-panels-by-bedrich-rios 找到了他们的开发者写的教程。认为这将算作解决方案。

4

2 回答 2

3

纯 JavaScript 解决方案：在 CSS 中：

div.wrap {visibility: hidden; position: absolute; overflow: hidden; 
    top: 0; left: 0; width: 100%; height: 100%}
div.wrap div.newContent {visibility: visible; position: relative; left: 100%;}

在 HTML 中：

<div class="initContent">
    This is the content that is initially displayed
</div>
<div class="wrap">
    <div class="newContent">
        Put the content you want to be revealed here
    </div>
</div>

newContent div 最初是隐藏的，因为它的左边缘位于其父（包装）div 的右边缘，并且 CSS 告诉浏览器隐藏任何溢出父 div 的内容。

然后为了显示隐藏的内容，设置一个计时器，逐渐style.left将内部 div 从 100% 减少到 0%，并将不透明度从 0 增加到 1。我创建了一个用于打开/关闭滑动菜单的类，可以稍微调整以执行此操作. （编辑：较新的版本）

于 2012-12-01T17:09:28.483 回答
2

我建议你使用我不久前在一个网站上使用的这个 jQuery 脚本，它的工作原理就像一个魅力，它叫做CODA SLIDER，它是由Kevin Batdorf制作的，安装它只有 5 行代码。

祝你好运

于 2012-12-01T03:17:00.187 回答