有一个页面垂直切片的网站,同时,有一些部分(div)有水平部分(div)滑块

时间:2012-10-06 02:28:30

标签: javascript html css css3 sliders

Please see this website as an example 登陆页面有四个滑块,每个滑块分别是独立的div,但同时整个网页都有独立的垂直部分。 我知道如何做垂直位,标准CSS和HTML。但是,如何在一个部分的水平div之间滑动呢?

1 个答案:

答案 0 :(得分:0)

使用100%宽度的div和overflow:hidden和position:relative(让我们称之为'section')

在div里面放了另一个宽度为400%的div和position:absolute(让我们把它称为'包装')

然后将4张幻灯片放在宽度为25%的div中并浮动:左侧

然后你可以通过改变'wrapper'的左边值来滚动幻灯片,将它移到'section'中

如果你设置左:0%你在第一张幻灯片上,-25%,你在第二张,-50%,你在第三张,-75%,你在第四张

你甚至可以为$('#wrapper')设置动画.animate({left:' - 25%'},'normal')