2

この例では..http：//jsfiddle.net/PKFyV/

jqueryuiを使用してスライダーを作成していることがわかります。赤いバーを上下にドラッグして入力の値を確認できますが、そうすると、赤い画像がグラデーションの遠近法を維持する際に問題が発生します。Jqueryはそのdivの高さを設定しているため、非常に小さい場合は、グラデーションの明るい方の端である画像の上端を使用します。必要なのは、背景を下から開始し、divの高さに基づいて拡大して、スライダーを1または2に設定すると、下のバーに赤いグラデーション画像の暗い方の端が表示されるようにすることです。何か案は？

.ui-slider {
    position: relative;
    text-align: left;
}
#slider-vertical {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat -30px 0;
    width:30px;
    height:161px;
}
.ui-slider-range {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 0;
    width:30px;
    height:161px;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    border: 0;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
}
4

1 に答える 1

4

これを試して：

.ui-slider-range {
    background:url(http://qupload.com/images/ratingslid.png) no-repeat 0 bottom;
    width:30px;
    height:161px;
}

デモ

于 2012-12-30T18:04:02.013 に答える