Question

我正在为我的网站开发一个jQuery滑块。我只希望人们滚动到一些具体的价值观（例如1900,1920,1960,1975,1976）。

我尝试了一切但没有任何作用！

我还希望这些值可以用作链接，例如，如果人们滚动到1920，它会将它们重定向到另一个页面。

这是代码

  $(function() {
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 1900,
      max: 2013,
      value: 1900,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
  });

这是html：

<label for="amount">Year:</label>
                <input type="text" id="amount" style="border:0; color:#000; font-weight:bold; background:none;" /><br /><br />
                <div id="slider-range-max"></div>

提前致谢！

Answer 1

请检查

jump scroll with redirect to another page of same blog on blogger

这与您正在寻找的相似

Answer 2

试试这个

$(function() {
    var araObj = new Array( 1900, 1920, 1960, 1975, 1976 );

    $(".slider").slider({
            min: 0,
            max: araObj.length,
            value: 0,
            create: function() {
                $(this).children().addClass("ui-corner-all");
                $(this).append($('<span></span>').css("left","0%").addClass("slider-digit").text(0));
                for (i=0;i<=araObj.length;i++)
                {
                    $(this).append($('<span></span>').css("left",((i+1)*(100/araObj.length))+"%").addClass("slider-digit").text(araObj[i]));
                };
            }
        });

    console.log(araObj);
});

DEMO

Answer 3

请记住，请仔细考虑您正在使用的滑块类型。许多滑块实现根本无法在移动设备和平板电脑上运行。例如，上面的答案不适用于iPhone或iPad。

可以使用的解决方案可以在这里找到：

http://touchpunch.furf.com

有许多示例和演示 - 它们似乎是触摸友好的。我不确定他们是否会默认合并新页面/链接。

我希望有所帮助。

具有特定值的jQuery滑块

3 个答案: