1

スクローラーを右に移動するとUIスライダーハンドラーの画像のサイズが大きくなり、左にスクロールするとサイズが小さくなるように変更しようとしています。もちろんSVGを使用するので、縮尺は正確です! 何か案は？:(

ここでコードを確認できます: http://jsfiddle.net/userdude/3teR3/

またはここ：

    #slider {
    width: 200px;
    margin: 50px auto;

}
.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:0px;
    top: -7px;
    border-style:none;
    cursor:help;
}

 <div id="slider"></div>


$(function() {
    $("#slider").slider();
});
4

1 に答える 1

1

.pngのサイズを幅と高さに依存させ、slider-valueでこれらを変更できます。

HTML：

 <div id="slider"></div>

CSS：

html,
body {
  width: 100%;
}
  #slider {
  width: 200px;
  margin: 50px auto;
}
  .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;

  background-size:100%;  /*this is the importent thing!*/

  overflow: hidden; 
  position:absolute;
  margin-left:0px;
  top: -7px;
  border-style:none;
  cursor:help;
}

Javascript：

$(function() {
  $("#slider").slider({    
    min:0, max: 10,
    slide: function(event,ui){
      $(".ui-slider-handle").css('width',28*(1+(ui.value)));
      $(".ui-slider-handle").css('height',28*(1+(ui.value)));
    },
  });
});

そして、ここではjsFiddleとして：http：//jsfiddle.net/1Blerk/3teR3/20/多分 それはまだあなたにとって有用です。

于 2013-02-26T01:42:17.800 に答える