javascript - 稍后阅读 使用 CSS3 和 HTML5 或 JS 幻灯片

Question

有谁知道如何使用 CSS3 或 JS 在“稍后阅读”应用程序中制作向左滑动的效果？

onclick --> 将整个 div 向左滑动，并在滑开的那个 div 下显示 div。

这是一个带有示例的视频：稍后阅读

Answer 1

可能这就是你想要的css3。 CSS

.parent{
    width:300px;
    border:1px solid red;
    height:100px;
    position:relative;
}
.box{
    width:40px;
    height:40px;
    background:green;
    display:block;
    z-index:0;
}
.slider{
    width:300px;
    background:#454545;
    color:#fff;
    font-weight:bold;
    font-size:24px;
    height:100px;
    position:absolute;
    top:0;
    right:300px;
    transition: right 1s ease;
    -moz-transition: right 1s ease; /* Firefox 4 */
    -webkit-transition:right 1s ease; /* Safari and Chrome */
    -o-transition:right 1s ease; /* Opera */
    z-index:1;
}
.box:focus + .slider,.box:active + .slider{
    right:0;
}

HTML

<div class="parent">
    <a href="#" class="box"></a>
    <div class="slider">hello</div>
</div>

检查这个http://jsfiddle.net/MhHx2/

更新

http://jsfiddle.net/MhHx2/4/

Answer 2

您可以通过使用几种标准技术来实现该效果。

1. 创建两个div元素，一个用于将要滑出的元素，一个用于将要显示的元素。
2. 使用z-index定位它们。请注意，divs 必须使用 , 或 定位absolute才能relative正常fixed工作。
3. 您可以使用 jQuery 来制作效果。我在这里找到了一个不错的帖子。

那应该让你完成。