当前位置：首页 > 网页特效 > 按钮特效

jQuery和css3旋钮控制按钮-knobKnob

分类：按钮特效日期：2024-05-14 点击(4) 评论(0)

简介

knobKnob是一款使用css3 transform和jQuery制作的旋钮插件。

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

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Shiny Switches with CSS3 & jQuery | Tutorialzine Demo</title>
 
        
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/knobKnob/knobKnob.css" />
 
        
    </head>
 
    <body>
 
    <section id="main">
 
      <div id="bars">
        <div id="control">
          
        </div>
                                
      </div>
 
    </section>
 
        
    <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
```html
(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('.rem');
 
          // Saving the current rotation
          rotation = currentDeg;
 
          // Marking the starting degree as invalid
          startDeg = -1;
        });
 
      });
    });
  };
 
})(jQuery);
```

web299.com

jQuery和css3旋钮控制按钮-knobKnob

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果