range滑块围成圆圈滑动效果代码
代码语言:html
所属分类:其他
代码描述:range滑块围成圆圈滑动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html { position: fixed; width: 100%; height: 100%; } body { display: grid; font-size: 20px; width: 100%; height: 100%; margin: 0; padding: 40px; } form { margin: auto; background: #fff; position: relative; } input[type="range"] { width: 28vmin; height: 20px; position: absolute; left: -38vmin; top: 0; transform-origin: 38vmin 50%; } </style> </head> <body> <form onsubmit="return false;"></form> <script> const form = document.querySelector('form'); const rows = 40; let ranges = []; let velocity = 0; let velocityTarget = 0; const build = () => { // const rows = Math.round((window.innerHeight-80)/26); form.innerHTML = ''; ranges = new Array(rows).fill(undefined).map((o, i) => { const el = document.createElement('input'); el.setAttribute('type', 'range'); el.setAttribute('step', '0.1'); el.oninput = () => rangeChanged(i); form.appendChild(el); return { el, value: el.valueAsNumb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0