使用JQuery UI滑块进行网站导航 - 滑块动作奇怪？

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

但是，我卡住得很快。这是我到目前为止，基于在codrops和hongkiat发现的教程：http://www.insertdisk2.de/stackoverflow/index.html

编辑：由于最大，我得到了“锚跳”覆盖。使用滑块我现在可以触发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>

我想这是任何范围/值/步骤或者我写的条件滑块行为如此“糊涂”的方式。

来源

2013-01-13 Aulbath

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

在slide事件处理程序，把

window.location.hash = 'home';

，这将改变片段标识符到家庭，并有相同的结果点击Home - 按钮。

来源

2013-01-13 19:07:36 mxgr

非常感谢Max，它现在确实跳到了主播，引发了所有的转换。现在我必须弄清楚实际的滑块有什么问题 - 因为它会以奇怪的方式触发跳转到锚点。 – Aulbath

使用JQuery UI滑块进行网站导航 - 滑块动作奇怪？

回答

相关问题