查询: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?
答
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);
});
});
这是否意味着你不知道如何构建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