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

基于SVG的jQuery旋转按钮插件

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

基于SVG的jQuery旋转按钮插件

简介

在页面中引入jquery,jquery ui和jquery.knob.js文件。

```html
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.knob.js"></script>     
```      
#####  HTML结构
使用一个div元素作为旋转按钮的容器，通过data-*属性来配置按钮。
```html

<div class="knob"
     data-steps="10"
     data-fgColor="#3ff"
     data-bgColor="#111"
     data-value="-.4"
     data-type="pan">
</div>    
```          
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过knob()方法来初始化该旋转按钮插件。

```html
$(".knob").knob()  
```              
#####  配置参数
所有的data-*配置参数也可以在初始化时传入：

| 参数  |  默认值 | 描述  |   
| ------------ | ------------ | ------------ | 
|bgColor|"#000"|SVG圆环的背景颜色。|
|fgColor|"#fff"|SVG圆环的前景颜色。|
|type|"vol"|"vol" 或 "pan"|
|tooltip|true|值改变时是否显示tooltip|
|turnWith|null|the element to apply the rotate transform to as well|
|arc|360|旋转按钮的最大度数。|
|steps|100|可调节的步数。|
|offset|0|角度偏移的度数。|
|range|"auto"|一次旋转鼠标移动多少像素。|
|invertRange|false|whether to invert the direction of rotation when moving the mouse|
|fineTuneFactor|10|按住shift键时范围的缩放倍数|
|value|0|初始值|
|resetValue|0|双击时重置旋转按钮的值|
|classPrefix|"knob"|允许使用其它的class前缀|
#####  事件
可用的事件有：

```html
$(selector).knob("value" [,newValue])：获取或设置值。
$(selector).knob("destroy")：销毁按钮实例。
```

web299.com

基于SVG的jQuery旋转按钮插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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