Question

我正在使用jQuery Knob，我想知道是否有任何方法可以将图像放在旋钮内而不是文本中，如果没有其他插件类似于具有此功能的jQuery旋钮？

Answer 1

快速回答是肯定的。旋钮将与图像一起使用。您需要做的就是为知道工作分配类/ ID。

 <img class='knob' src='http://webtaj.com/images/car-best-sports-cars_41187.jpg'>

jsFiddle

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 use a image instead / to cover the value

jQuery旋钮，放置图像而不是文本

2 个答案: