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 的大小取决于宽度和高度，并使用滑块值更改它们：

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 回答