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 の代わりにsを使用する必要があります。px元のサイズと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 に答える