Question

我打算建立一个小型的个人投资组合网站。我想尝试不同类型的导航 - 考虑到触摸设备，使用JQuery UI滑块而不是通常的基于按钮的菜单似乎是一个好主意。

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

编辑：感谢Max，我得到了“锚跳”。使用滑块我现在可以触发CSS过渡并导航页面。非常感谢！

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

$（function（）{

        //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>

我想这是范围/值/步数或我写条件的方式，滑块的行为如此“困惑”。

Answer 1

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

在slide事件处理程序中，输入

window.location.hash = 'home';

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

使用JQuery UI滑块进行网站导航 - 滑块表现得很奇怪？

1 个答案: