查询：2周的div滑动左/右

我有这个网站查询：2周的div滑动左/右

<div id="container"> 
    <div id="slide"> 
     <div id="slide1"> 
      Content 1 
      <a href="#" id="show-slide2">Show Content 2</a> 
     </div> 
     <div id="slide2"> 
      Content 2 
     </div> 
    </div> 
</div>

#container有max-width:1250px。仅载入#slide1应显示。现在我想点击a#show-slide2和#slide2应该从右侧滑入。

我需要什么CSS和JS？

来源

2013-04-20 sugo

这是否意味着你不知道如何构建CSS？你有没有尝试过什么？ – 2013-04-20 17:42:08

这是一个[示例]（http://jsfiddle.net/RyDuK/）。 – Vucko 2013-04-20 17:52:34

我尝试了很多，但没有任何工作，所以我决定发布没有我的尝试;-)问题始终是100％的宽度。 Thanx，roXon，为您的解决方案。 – sugo 2013-04-20 17:58:18

LIVE DEMO

HTML

<div id="slides"> 
    <div> 
    Content 1 
    <a href="#" id="show-slide2">Show Content 2</a> 
    </div> 
    <div> 
    Content 2 
    </div> 
</div>

CSS：

#slides{ 
    position:relative; 
    overflow:hidden; 
    margin:0 auto; 
    background:#cf5; 
    width:400px; 
    height:200px; 
    white-space:nowrap; 
} 
#slides div{ 
    position:relative; 
    display:inline-block; 
    margin-right:-4px; 
    white-space:normal; 
    vertical-align:top; 
    *display:inline; 
    background:#eee; 
    width:400px; 
    height:200px; 
}

的jQuery：

$(function(){ 

    var slideW = $('#slides').width(); 
    $('#show-slide2').click(function(e){ 
    e.preventDefault(); 
    $('#slides').animate({scrollLeft: slideW }, 600); 
    }); 

});

来源

2013-04-20 17:50:02

查询：2周的div滑动左/右

回答

相关问题