1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>jQuery Knob 尝试</title> 5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 6 <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> 7 <script src="dist/jquery.knob.min.js"></script> 8 <script> 9 $(function() { 10 $(".knob").knob({ 11 max: 940, 12 min: 500, 13 thickness: .3, 14 fgColor: '#2B99E6', 15 bgColor: '#303030', 16 // "cursor":true, 17 'release':function(e){ 18 console.log("release : " + value); 19 } 20 }); 21 22 $(".knob2").knob({ 23 'release':function(e){ 24 // $('#img').animate({e}); 25 console.log("release : " + value); 26 } 27 }); 28 }); 29 </script> 30 31 </head> 32 <body> 33 34 <div > 35 <input class="knob" data-width="200" data-skin="tron" data-displayInput="true" value="200"> 36 37 <input class="knob2" data-width="150" data-fgColor="green" data-bgColor="#ffec03" data-skin="tron" data-thickness=".3" data-min="200" data-max="600" value="200"> 38 39 </div> 40 41 42 </body> 43 </html>
参数设置可以在input里直接设置也可以用js初始化。
效果图
源码下载==》下载