最有效的方式做一个水平滑动布局 [英] Most efficient way to do a horizontal sliding layout

问题描述

以下面的布局为例。

黑色边框代表用户屏幕。

The black border represents the user screen.

三个小矩形表示导航按钮，点击时，较大框的相应颜色将水平滑动到用户屏幕。

The three small rectangles represent navigation buttons, when clicked, the corresponding color of the bigger box will slide horizontally to the user screen.

例如，当我点击蓝色小按钮时，大蓝框（这是一个div），将向左滑动到用户屏幕，同样适用于其他导航按钮。

For example, when I click the small blue button, the big blue box (which is a div), will slide to the left going to the user screen, same goes for the other nav buttons.

你能否指出我正确的方向如何实现这个目标？

Can you kindly point me to the right direction on how to achieve this?

推荐答案

您可能正在寻找内容滑块。一个与您想要的类似的例子是： http://bxslider.com/ examples / auto-show-pager 。

You're probably looking for a content slider. An example of one that is similar to what you want would be this: http://bxslider.com/examples/auto-show-pager.

或者，您可以自己制作：

Alternatively, you could probably make your own:

http://jsfiddle.net/charlescarver/N3RZY/5/

HTML

<div class="viewport">
    <div class="inside">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</div>

<div class="three-l">Green</div>
<div class="two-l">Blue</div>
<div class="one-l">Red</div>

jQ

$(".three-l").click(function() {
  $(".viewport").animate({scrollLeft: 400}, 500);
});
$(".two-l").click(function() {
  $(".viewport").animate({scrollLeft: 200}, 500);
});
$(".one-l").click(function() {
  $(".viewport").animate({scrollLeft: 0}, 500);
});

CSS

.viewport{
    width:200px;
    height:200px;
    overflow-x:scroll;

}

.inside{
    width:1000px;
    height:200px;
}

.inside div{
    height:200px;
    width:200px;
    float:left;
}

.one{
    background-color:red;
}

.two{
    background-color:blue;
}

.three{
    background-color:green;
}

这篇关于最有效的方式做一个水平滑动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！