Question

我希望与此网站http://energytrust.org/timeline/完全相同，因为它们底部有一个栏，您可以拖动滚动页面。 enter image description here

我似乎无法找到任何东西

Answer 1

---------------------------------- 示例＃1

正如我在评论中提到的那样 - 剑道ui滑块Kendo-ui slider会做。以下是Fiddle

的示例

基本上我将内容扩大到屏幕，然后通过更改它的边距将其移动到滑块的“幻灯片”事件上。

注意：这不是执行此操作的唯一方法。只是一个例子。

<强> HTML

<div id="main"></div>
<input id="slider" class="balSlider" value="0" />

<强>的CSS ：

#main {
    width:2000px;
    height:200px;
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* IE10+ */
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1);
    /* IE6-9 */
}

<强>的Javascript ：

var slider = $("#slider").kendoSlider({
    increaseButtonTitle: "Right",
    decreaseButtonTitle: "Left",
    slide: sliderOnSlide,
    min: 0,
    max: 20,
    smallStep: 2,
    largeStep: 1
}).data("kendoSlider");

function sliderOnSlide(e) {
    $("#main").css("margin-left", "-" + (e.value * 20)+"px");
}

---------------------- 示例＃2

您可以使用Custom scroll bar plugin来实现相同目标。这是Fiddle

<强> HTML

<body class="container default-skin">
<div id="main" ></div>
</body>

<强> CSS

body
{
 height:202px;
    width:300px;

}

#main {
    width:2000px;
    height:200px;
    background: #1e5799;
    /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(25%, #29b221), color-stop(77%, #d83a22), color-stop(100%, #f2f282));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* IE10+ */
    background: linear-gradient(to right, #1e5799 0%, #29b221 25%, #d83a22 77%, #f2f282 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#f2f282', GradientType=1);
    /* IE6-9 */
}

<强>的Javascript

$(document).ready(function() {
  $(".container").customScrollbar();
});

使用jQuery修复可拖动的Scrollbar或Scrubber

1 个答案: