阅读后面的幻灯片与CSS3和HTML5或JS

做任何人知道如何使幻灯片左侧的效果，如在“稍后阅读”应用与CSS3或JS？阅读后面的幻灯片与CSS3和HTML5或JS

onclick - >将整个div滑动到左侧，并显示滑动后的div。

这里是与例如视频：READ IT LATER

2012-06-22 Max

可能是你想用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/

来源

2012-06-22 11:04:07 sandeep

好的。那几乎是完美的。 Hello Box只需要向右滑动而不需要保持其他框被按下。意思是：按绿色框 - >滑动右边灰色框。触摸灰色框 - >滑动左边的灰色框 – Max

经过这么多的努力，最后我创建了http://jsfiddle.net/MhHx2/4/ – sandeep

了解它。非常感谢。 – Max

您可以通过以下几个标准技术达到这样的效果。

创建两个div元素，一个用于将要滑出的元素，另一个用于将要显示的元素。
使用z-index来定位它们。请注意，div必须使用absolute,relative或fixed才能使用。
你可以使用jQuery的效果。我发现一个体面的职位here。

这应该让你完成。

来源

2012-06-22 10:41:09 Sidd

好的。谢谢你的提示。我完成了一个单独的div。但如果我想有一个4到5个滑块列表，我不知道如何在jQuery中做到这一点。我如何每次触发每个div /滑块的相同效果？ – Max

@Max，你能更具体一点吗？对于多个“div”，只需重复相同的操作，将z索引叠加起来即可。例如，具有z索引1到4的4个'div'元素将被堆叠在另一个之上。现在我们已经关注了堆叠部分，您可以使用'var current'来保持哪个'div'在顶部。使用jQuery来移动特定的'div'，比如点击按钮。我希望能够清除它。 – Sidd

阅读后面的幻灯片与CSS3和HTML5或JS

回答

相关问题