0

我正在尝试创建一个网页底部有一个滑块，可以从左向右拖动以移动视口。我试图绘制一个简单的图表来说明我在这里想要实现的目标：

在此处输入图像描述

红色框是可拖动的滑块。用户应该能够左右拖动这个红色框，这应该与主视口中的图像相对应。有没有可用的插件？

目前我正在考虑使用 jquery-ui 可拖动插件来处理滑块，但我不确定如何操作视口？

我在想也许我可以捕获滑块移动的距离，然后对该值应用一个乘数，以使视口移动正确的量，但我不确定这是否是一个明智的想法？

实现这一目标的最佳方法是什么？

谢谢

4

2 回答 2

1

您可以从底部滚动条的jQuery UI 滑块开始。

修改它以满足您的需要（一点点 CSS 调整）

使用该$('.viewport')[0].scrollLeft = xpos方法，您可以滚动到右侧的 x 位置。

这是一个例子：http: //jsfiddle.net/Vandeplas/zAJtL/

js：

var percentage = 50;

$('.scrollTo').click(function(){
    var vp = $('.viewport')[0];
        vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
    console.log(vp.scrollWidth);
});

CSS：

.viewport {
    width: 200px;
    height: 40px;
    overflow: auto; /* set to hidden to hide the default scrollbar*/
}

html:

<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>

更新：带滑块：http: //jsfiddle.net/Vandeplas/zAJtL/1/

于 2013-07-04T10:49:04.560 回答
0

如果有人想知道，我设法以此为基础找到了解决方案：http: //jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/

希望它会帮助其他试图实现相同目标的人！

于 2013-07-04T16:15:54.520 回答