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

【问题标题】：jQuery knob, put image instead of textjQuery旋钮，放置图像而不是文本
【发布时间】：2013-12-14 11:18:53
【问题描述】：

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

【问题讨论】：

【解决方案1】：

答案是肯定的。旋钮将与图像一起使用。您需要做的就是分配类/id 以便知道工作。

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

jsFiddle

【讨论】：

我正在尝试使用您的知识，有什么方法可以更改图像。就像我有 9 张图片，当我滑动时我可以显示图片？希望你能理解我的问题。
我猜 value 参数在这里不起作用，正如我在你的小提琴中看到的那样。你知道如何在有图像时填充外圈吗？
@San -- 是的，你可以在旋钮期间更改图像，只需添加更改回调即可。我已经更新了小提琴
@void -- 不确定我是否理解您要查找的内容。

【解决方案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

【讨论】：