jquery.knob实现旋钮调节数值效果代码
代码语言:html
所属分类:其他
代码描述:jquery.knob实现旋钮调节数值效果代码,拖动鼠标旋转旋钮进行数值改变。
代码标签: jquery.knob 旋钮 调节 数值
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> * { margin:0; padding: 0; } body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } hr { margin: 3em 1em; width: 100%; border: 0px; border-bottom: 1px solid #111; clear: both; } .knob, .knob-clean { width: 200px; height: 200px; display: inline-block; margin: 1em; position: relative; } .knob .knob-knob { transition: width .2s, height .2s; background-color: #111 !important; border: 2px solid #222; box-shadow: 0px 0px 20px rgba(0,0,0,1), 0px 10px 5px rgba(0,0,0,.7), inset 0px 10px 10px rgba(255,255,255,.05); } .knob .knob-stroke { stroke-width: 20% !important; transition: stroke-width .2s; } .knob.grab .knob-stroke { stroke-width: 10% !important; } .knob .knob-pointer { background: #3ff !important; } .knob .knob-knob::before { position: absolute; left: 10%; top: 10%; width: 70%; height: 70%; content: " "; background: linear-gradient(-25deg, rgba(255,255,255,0).........完整代码请登录后点击上方下载按钮下载查看
网友评论0