Question

您知道是否可以更换，覆盖o在圆形进度条内插入图像？

我知道可以省略该值，但是如果可以替换则没有示例或提示。

Answer 1

可以使用position:absolute为图像插入jquery旋钮内的图像，并将jquery旋钮创建的<div>作为旋钮画布的容器。向此div添加更高的z-index，旋钮将显示在图像的顶部 - 因此您不必注意正确的图像大小和形状。示例设置：

<input class="knob" type='text' value='100' data-angleOffset="0" 
 data-angleArc="360" data-fgColor="blue" data-displayInput=false />
<img class="inside" src="http://placehold.it/120x120"/>

/* CSS*/
.inside
{
 position:absolute;
 top:50px;
 left:50px;
 z-index:1;
}
.outside
{   
 position:absolute;
 z-index: 2;
}

/* jQuery*/
$(function () {
  $('.knob').knob({});
  $(".knob").parent("div").addClass("outside")    
});

演示：Image inside jquery knob

Answer 2

旋钮本身没有这样的选项，但你总是可以使用jQuery，显然，旋钮会创建一个外部DIV来保存画布，所以你可以调用类似下面的代码来插入一个IMG标签进入该div并使用位置（相对/绝对）来管理它的外观。您可以围绕旋钮的宽度和高度进行游戏，使用.knob-image顶部/左侧以完美地适应圆圈内的图像

<style>
    .knob-image {
        position: absolute;
        top: -71px;
        left: 15px;
        width: 70px !important;
        height: 70px !important;
        border-radius: 50%;
    }
</style>
<div class="knob" data-width="100" data-height="100" data-thickness=".3" data-displayInput=false></div>    
<script>
    $(".knob").knob();         
    $(".knob").parent('div').css('position', 'relative').prepend('<img src="abc.jpg" class="knob-image">');        
    $(".knob").val(27).trigger("change"); //set the default value
</script>

jQuery Knob使用图像代替/来覆盖值

2 个答案: