0

我正计划制作一个小型的个人投资组合网站。我想为它尝试一种不同的导航方式——考虑到触摸设备，使用 JQuery UI 滑块而不是通常的基于按钮的菜单似乎是个好主意。

但是，我很快就被卡住了。这是我到目前为止所拥有的，基于在 codrops 和 hongkiat 上找到的教程：http: //www.insertdisk2.de/stackoverflow/index.html

编辑：感谢 Max，我得到了“锚点跳跃”的覆盖。使用滑块，我现在可以触发 CSS 转换并导航页面。非常感谢！

滑块的行为仍然很奇怪——我计划有 4 或 5 个“状态”，但它似乎错误地计算了值/位置，导致触发太早或太晚。

$（函数（）{

        //Store frequently elements in variables
        var slider  = $('#slider'),
            tooltip = $('.tooltip');

        //Hide the Tooltip at first
        tooltip.hide();

        //Call the Slider
        slider.slider({
            //Config
range: "min",
step: 50,
value: 0,

            start: function(event,ui) {
                tooltip.fadeIn('fast');
            },

            //Slider Event
            slide: function(event, ui) { //When the slider is sliding

                var value  = slider.slider('value'),
                    volume = $('.test');

                tooltip.css('right', value).text(ui.value);  //Adjust the tooltip accordingly

                if(value <= 5) { 
                    volume.css('background-color', '#000');
                    window.location.hash = 'home';
                } 
                else if (value == 50) {
                    window.location.hash = 'portfolio';

                } 
                else  {
                    window.location.hash = 'contact';
                };

            },

            stop: function(event,ui) {
                tooltip.fadeOut('fast');
            },
        });

    });
</script>

我想这要么是范围/值/步骤，要么是我编写滑块行为如此“混乱”的条件的方式。

4

1 回答 1

0

如果您希望滑块复制导航按钮的功能，您应该考虑按钮的作用：它们更改位置，或者更准确地说，更改#. 当您想要更改 URL 时，您已经接近解决方案。

在slide事件处理程序中，将

window.location.hash = 'home';

这会将片段标识符更改为 home 并具有与单击Home-Button 相同的结果。

于 2013-01-13T19:07:36.957 回答