我的项目的当前状态可以是seen here on jsFiddle 我想按摩滑块的行为只是一种微笑 我正在寻找一种方法来轻推它们,以便X值从每个滑块的中心进行注册。
正如您所看到的,滑块很好地设置了输入的值,但它们看起来/感觉有点不自然,因为X值是根据前缘而不是“中心质量”。
向左移动滑块尽可能感觉就像停止一样。尽可能向右移动它感觉就像它超出了它的边界。
我确信我可以想象一些非常讨厌的黑客,但我更喜欢更专业的方法:)
我的想法首先转到CSS(我有点希望稍微推动它),但到目前为止没有运气。
我现在的猜测是,它将归结为JS解决方案。
任何想法/想法?
答案 0 :(得分: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/
P.S。这是一个非常漂亮的小部件,所以我无法抗拒改善你小提琴的互动,我希望你不介意!