滑动数值加减

下载代码

html

css

js

分享到微信朋友圈

X

html

<form>
  <div role="group" aria-label="value picker" style="--n: 20; --k: 19">
    <input type="radio" name="o" id="o0" style="--i: 0"/>
    <label for="o0" style="--i: 0">0</label>
    <input type="radio" name="o" id="o1" style="--i: 1"/>
    <label for="o1" style="--i: 1">1</label>
    <input type="radio" name="o" id="o2" style="--i: 2"/>
    <label for="o2" style="--i: 2">2</label>
    <input type="radio" name="o" id="o3" style="--i: 3"/>
    <label for="o3" style="--i: 3">3</label>
    <input type="radio" name="o" id="o4" style="--i: 4"/>
    <label for="o4" style="--i: 4">4</label>
    <input type="radio" name="o" id="o5" style="--i: 5"/>
    <label for="o5" style="--i: 5">5</label>
    <input type="radio" name="o" id="o6" style="--i: 6"/>
    <label for="o6" style="--i: 6">6</label>
    <input type="radio" name="o" id="o7" style="--i: 7"/>
    <label for="o7" style="--i: 7">7</label>
    <input type="radio" name="o" id="o8" style="--i: 8"/>
    <label for="o8" style="--i: 8">8</label>
    <input type="radio" name="o" id="o9" style="--i: 9"/>
    <label for="o9" style="--i: 9">9</label>
    <input type="radio" name="o" id="o10" style="--i: 10"/>
    <label for="o10" style="--i: 10">10</label>
    <input type="radio" name="o" id="o11" style="--i: 11"/>
    <label for="o11" style="--i: 11">11</label>
    <input type="radio" name="o" id="o12" style="--i: 12"/>
    <label for="o12" style="--i: 12">12</label>
    <input type="radio" name="o" id="o13" style="--i: 13"/>
    <label for="o13" style="--i: 13">13</label>
    <input type="radio" name="o" id="o14" style="--i: 14"/>
    <label for="o14" style="--i: 14">14</label>
    <input type="radio" name="o" id="o15" style="--i: 15"/>
    <label for="o15" style="--i: 15">15</label>
    <input type="radio" name="o" id="o16" style="--i: 16"/>
    <label for="o16" style="--i: 16">16</label>
    <input type="radio" name="o" id="o17" style="--i: 17"/>
    <label for="o17" style="--i: 17">17</label>
    <input type="radio" name="o" id="o18" style="--i: 18"/>
    <label for="o18" style="--i: 18">18</label>
    <input type="radio" name="o" id="o19" style="--i: 19" checked="checked"/>
    <label for="o19" style="--i: 19">19</label>
  </div>
</form>

css

body, div, label {
  display: grid;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #1c1c1c;
}

form {
  place-self: center;
  overflow: hidden;
  width: 4em;
  border-radius: 0.75em;
  box-shadow: 0 3rem 6rem rgba(13, 13, 13, 0.2);
  background: #333333;
  font: 600 6.5em ubuntu, sans-serif;
  transition: transform 0.25s;
  pointer-events: none;
}
form:active {
  transform: scale(0.85);
}

[role=group] {
  align-content: center;
  height: 2em;
  transform: translate(calc((.5 - var(--k))*2em));
  transition: inherit;
}

[type=radio] {
  z-index: 2;
  opacity: 0;
}
[type=radio], [type=radio] + label {
  grid-area: 1/calc(var(--i) + 1);
}
[type=radio] + label {
  --dif: calc(var(--i) - var(--k));
  --sgn: clamp(-1, var(--dif), 1);
  --not-sel: min(1, max(-1*var(--dif), var(--dif)));
  place-content: center;
  width: 2em;
  height: 4em;
  transform-origin: calc(50%*(1 - var(--sgn)));
  transform: scale(calc(1 - var(--not-sel)*.5));
  color: hsl(0, 0%, calc(100% - var(--not-sel)*57%));
  transition: inherit;
  user-select: none;
  cursor: pointer;
}
[type=radio]:not(:checked) + label {
  pointer-events: auto;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>滑动数值加减-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号