1

我的项目的当前状态可以在 jsFiddle 上看到。
我想稍微按摩一下滑块的行为。
我正在寻找一种方法来轻推它们，以便 X 值从每个滑块的中心注册。

如您所见，滑块很好地设置了输入的值，但它们看起来/感觉有点不自然，因为 X 值是根据前缘而不是“中心质量”。
将滑块尽可能向左移动感觉就像它停止了。将它尽可能向右移动感觉就像它超出了它的边界。

我敢肯定我可以想象出一些非常讨厌的黑客，但我更喜欢更专业的方法:)
我的想法首先是 CSS（我有点希望只是稍微推动一下），但到目前为止还没有运气。
我现在的猜测是它会归结为一个 JS 解决方案。

有什么想法/想法吗？

4

1 回答 1

1

您可以在不通过转换更改 x 值的情况下调整位置。您只需要添加transform属性...

    <rect id="rect_slider_knob"
         class="slidable"
         width="4%"
         height="24%" 
         y="38%"
         rx="2%"
         ry="3%"
         stroke="#666" 
         transform="translate(-6, 0)"
    />

你可以在这里看到一个演示：http: //jsfiddle.net/mzmRN/

PS 这是一个非常不错的小部件，所以我忍不住改进了你小提琴的交互，希望你不介意！

于 2012-06-27T05:25:13.950 回答