Question

我正在尝试更改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();
});

Answer 1

您可以根据宽度和高度确定.png的大小，并使用滑块值更改这些：

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/ 也许它对你来说仍然有用。

Jquery Slider Widget ui-slider-handle scale手柄

1 个答案: