jQuery和css3音量调节旋钮插件

旋转按钮 旋钮 2014-11-21

控件介绍
这是一款实用jQuery和css3制作的音量调节旋钮插件。该jQuery旋钮的UI使用css3来渲染,旋钮的旋转控制则使用jquery来实现。
浏览器兼容

支持IE10+

演示下载 721
使用方法

HTML

1
2
3
4
5
6
7
8
9
10
<figure class="dial">
  <div class="center"><span>0</span></div>
  <div class="wrapper">
    <div class="knob">
      <div class="handle"></div>
      <div class="indicator"></div>
    </div>
  </div>
  <canvas class="progress"></canvas>
</figure>

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
(function() {
  var Dial, dial,
    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
  Dial = (function() {
    Dial.prototype.raf = null;
 
    Dial.prototype.mdown = false;
 
    Dial.prototype.mPos = {
      x: 0,
      y: 0
    };
    Dial.prototype.elementPosition = {
      x: 0,
      y: 0
    };
    Dial.prototype.target = 0;
    Dial.prototype.steps = 60;
    Dial.prototype.radius = 150;
    Dial.prototype.maxDiff = 150;
    Dial.prototype.constraint = 360;
    Dial.prototype.currentVal = 0;
    function Dial($context) {
      var knobOffset;
      this.$context = $context;
      this.onMouseMove = __bind(this.onMouseMove, this);
      this.onMouseUp = __bind(this.onMouseUp, this);
      this.onMouseDown = __bind(this.onMouseDown, this);
      this.$knob = this.$context.find(".knob");
      this.$handle = this.$context.find(".handle");
      this.$progress = this.$context.find(".progress");
      this.$center = this.$context.find(".center");
      this.$textOutput = this.$center.find("span");
      this.ctx = this.$progress.get(0).getContext("2d");
      knobOffset = this.$knob.offset();
      this.elementPosition = {
        x: knobOffset.left,
        y: knobOffset.top
      };
      this.centerX = this.$progress.width() / 2;
      this.centerY = this.$progress.height() / 2;
      this.canvasSize = this.$progress.width();
      this.addEventListeners();
      this.draw();
      return;
    }
    Dial.prototype.addEventListeners = function() {
      this.$context.on("mousedown", this.onMouseDown);
      this.$context.on("mousemove", this.onMouseMove);
      $("body").on("mouseup", this.onMouseUp);
    };
    Dial.prototype.setDialPosition = function() {
      this.$knob.css({
        transform: "rotate(" + this.target + "deg)"
      });
      this.$handle.css({
        transform: "rotate(-" + this.target + "deg)"
      });
      this.draw();
    };
    Dial.prototype.draw = function() {
      var i, _i, _ref;
      this.$progress.get(0).height = this.canvasSize;
      this.$progress.get(0).width = this.canvasSize;
      this.ctx.save();
      this.ctx.translate(this.centerX, this.centerY);
      this.ctx.rotate((-90 * (Math.PI / 180)) - (Math.PI * 2 / this.steps));
      for (i = _i = 0, _ref = this.steps - 1; _i <= _ref; i = _i += 1) {
        this.ctx.beginPath();
        this.ctx.rotate(Math.PI * 2 / this.steps);
        this.ctx.lineWidth = 2;
        this.ctx.lineTo(160, 0);
        this.ctx.lineTo(170, 0);
        if (i <= Math.floor(this.currentVal)) {
          this.ctx.shadowBlur = 10;
          this.ctx.strokeStyle = "#fff";
          this.ctx.shadowColor = "#fff";
          if (i > (this.steps * 0.75) && this.currentVal > (this.steps * 0.75)) {
            this.ctx.strokeStyle = "#ff9306";
            this.ctx.shadowColor = "#ff9306";
          }
          if (i > (this.steps * 0.88) && this.currentVal > (this.steps * 0.88)) {
            this.ctx.strokeStyle = "#ff0606";
            this.ctx.shadowColor = "#ff0606";
          }
        } else {
          this.ctx.strokeStyle = "#444";
          this.ctx.shadowBlur = 0;
          this.ctx.shadowColor = "#fff";
        }
        this.ctx.stroke();
      }
      this.ctx.restore();
    };
    

本文转载请注明出处:http://www.zhuiye.com/detail_31.html
评论区
  • 还没有评论,快来抢沙发吧!