1

我使用 jQuery UI 滑块控件。我的滑块宽度为200px. 我希望我的左手柄14px的中心向右移动，我的右手柄的中心向左偏移14px.

我的滑块将超过172px( 200 -14 - 14)。background-image措施200px。_ 的长度14px计算如下：

width of the handle (28px) / 2

我使用默认margin-left: 0px;删除margin-left:-14px。但是，我的右手柄向右移动28px！

你能帮我解开这个谜吗？

.ui-slider .ui-slider-handle {
    width: 28px; 
    height: 28px; 
    background: url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
    overflow: hidden; 
    position: absolute;
    margin-left: 0;
    top: -7px;
    border-style: none;
    cursor: help;
}​

JSFiddle 演示

4

2 回答 2

0

奇怪的是，您想更改默认样式，因为您应用的新样式非常难看。也就是说，您可以像这样覆盖右手柄的特殊样式：

$(function(){
   $('.ui-slider a:nth-child(odd)').css('margin-left','-28px');
});
于 2012-12-15T11:17:06.967 回答
0

所有这一切，而且一直只是你使用了错误的措施。您需要使用ems 而不是pxs，这是我在查看原始尺寸和margin-left. 所以...

.ui-slider .ui-slider-handle {
    height: 1.6em;
    width: 1.6em;
    margin-left: -.8em;
    position: absolute;
    top: -7px;
    background: url(http://www.celinni.com/creaprint/js/ui/images/bulle.png) no-repeat center center;
    border-style: none;
    cursor: help;
}

http://jsfiddle.net/userdude/3teR3/5/

我已经使图像部分透明（在 Firefox 或 Chrome 中），因此您可以看到它们完美地排列在一起。当您滑动它们时，它们也可以正常工作。

于 2012-12-15T12:34:38.407 回答