jQuery和css3旋钮控制按钮-knobKnob

按钮 2014-11-18

控件介绍
knobKnob是一款实用jQuery和css3制作的旋钮控制按钮,knobKnob这款jQuery和css3旋钮效果非常逼真,可用鼠标控制旋钮刻度的变化。
浏览器兼容

支持IE10+

演示下载 1307
使用方法

HTML

html结构非常简单,只需要放一个空的id为control的div即可,后面的html代码由jQuery在运行时动态产生。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Shiny Switches with CSS3 &amp; jQuery | Tutorialzine Demo</title>
 
        <!-- CSS stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/knobKnob/knobKnob.css" />
 
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
 
    <body>
 
    <section id="main">
 
      <div id="bars">
        <div id="control">
          <!-- The knob markup will go here -->
        </div>
                                <!-- The colorful dividers will go here -->
      </div>
 
    </section>
 
        <!-- JavaScript includes -->
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="assets/knobKnob/transform.js"></script>
    <script src="assets/knobKnob/knobKnob.jquery.js"></script>
    <script src="assets/js/script.js"></script>
 
    </body>
</html>

JAVASCRIPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
(function($){
 
  $.fn.knobKnob = function(props){
 
    var options = $.extend({
      snap: 0,
      value: 0,
      turn: function(){}
    }, props || {});
 
    var tpl = '<div class="knob">\
        <div class="top"></div>\
        <div class="base"></div>\
      </div>';
 
    return this.each(function(){
 
      var el = $(this);
      el.append(tpl);
 
      var knob = $('.knob',el)
        knobTop = knob.find('.top'),
        startDeg = -1,
        currentDeg = 0,
        rotation = 0,
        lastDeg = 0,
        doc = $(document);
 
      if(options.value > 0 && options.value <= 359){
        rotation = currentDeg = options.value;
        knobTop.css('transform','rotate('+(currentDeg)+'deg)');
        options.turn(currentDeg/359);
      }
 
      knob.on('mousedown', function(e){
 
        e.preventDefault();
 
        var offset = knob.offset();
        var center = {
          y : offset.top + knob.height()/2,
          x: offset.left + knob.width()/2
        };
 
        var a, b, deg, tmp,
          rad2deg = 180/Math.PI;
 
        knob.on('mousemove.rem',function(e){
 
          a = center.y - e.pageY;
          b = center.x - e.pageX;
          deg = Math.atan2(a,b)*rad2deg;
 
          // we have to make sure that negative
          // angles are turned into positive:
          if(deg<0){
            deg = 360 + deg;
          }
 
          // Save the starting position of the drag
          if(startDeg == -1){
            startDeg = deg;
          }
 
          // Calculating the current rotation
          tmp = Math.floor((deg-startDeg) + rotation);
 
          // Making sure the current rotation
          // stays between 0 and 359
          if(tmp < 0){
            tmp = 360 + tmp;
          }
          else if(tmp > 359){
            tmp = tmp % 360;
          }
 
          // Snapping in the off position:
          if(options.snap && tmp < options.snap){
            tmp = 0;
          }
 
          // This would suggest we are at an end position;
          // we need to block further rotation.
          if(Math.abs(tmp - lastDeg) > 180){
            return false;
          }
 
          currentDeg = tmp;
          lastDeg = tmp;
 
          knobTop.css('transform','rotate('+(currentDeg)+'deg)');
          options.turn(currentDeg/359);
        });
 
        doc.on('mouseup.rem',function(){
          knob.off('.rem');
          doc.off(
本文转载请注明出处:http://www.zhuiye.com/detail_33.html
评论区
  • 还没有评论,快来抢沙发吧!