单击时 jQuery UI 滑块会跳跃

Question

我使用 Jquery UI slider 创建两种不同的幻灯片效果，一种是水平，另一种是垂直。

但是他们两个都有一个独特的问题困扰着我和我的客户，而且我似乎无法找到解决方案。在我为这些模块所做的所有工作之后，这是一个令人头痛和令人沮丧的事情。

我确信我不是唯一遇到此问题的人，但似乎没有在网上找到任何适合我的问题的解决方案

您可以在此处查看这两个模块

http://bit.ly/dVLPfc

http://bit.ly/g5rflP

滑块本身使用百分比来表示其位置“left:0%”，如果您单击滑块，它会跳动约 5-7%。所以看起来有点不稳定。我想要的是滑块使用单击它时设置的百分比量，并且仅在移动鼠标时才更改。我尝试将位置粘贴到一个值中，并在单击滑块时将其放入，但 UI 滑块插件 会覆盖它。

滑块并不总是跟随光标速度，在垂直版本中，您可以看到它移出了下面的光标位置某些情况下。

让我知道你的想法，希望你能帮助我走上正确的道路。

Answer 1

您的滑块手柄边距似乎与自定义样式滑块手柄的尺寸不符。

左边距或上边距需要是滚动手柄长度或高度的一半。

对于您的第一个模块，由于水平滑块手柄的长度为 60px，因此您需要在 dagskra.css 中将滑块手柄 ma​​rgin-left 更改为 -30px。

#dagskra .slider div a {
    background: url("../images/dagskra/slider/slider.png") no-repeat scroll right center transparent;
    cursor: default;
    display: block;
    height: 28px;
    margin-left: -30px;
    position: absolute;
    top: -0.5em;
    width: 60px;
    z-index: 2;
}

对于第二个模块，由于垂直滑块手柄的高度为 50px，因此您需要在 dagatal.css 中将滑块手柄 ma​​rgin-top 更改为 -25px。

.ui-slider-handle {
    background: url("../images/dagatal/scroll/slider.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 50px;
    margin-left: 2px;
    margin-top: -25px;
    position: absolute;
    right: -4px;
    width: 16px;
    z-index: 20;
}