veloxi实现左右拖动数字stepper步进器代码
代码语言:html
所属分类:拖放
代码描述:veloxi实现左右拖动数字stepper步进器代码
代码标签: veloxi 左右 拖动 数字 stepper 步进器 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } :root { --background-color: hsl(208.7, 100%, 2%); background-color: var(--background-color); } body { margin: 0; padding: 0; display: flex; height: 100vh; flex-direction: column; align-items: center; justify-content: center; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .stepper-container { display: flex; align-items: center; justify-content: center; position: relative; } .arrow { position: absolute; color: rgb(75, 75, 75); width: 50px; pointer-events: none; } .arrow-right { right: -80px; } .arrow-left { left: -80px; transform: rotate(180deg); } .stepper { flex-shrink: 0; width: 180px; height: 180px; background: #8053fe; border-radius: 25%; touch-action: none; -webkit-touch-action: none; user-select: none; -webkit-user-select: none; display: flex; align-items: center; overflow: hidden; will-change: transform; z-index: 10; } .numbers { height: 100%; display: flex; align-items: center; width: 100%; will-change: transform; } .number { display: flex; align-items: center; justify-content: center; color: white; font-size: 120px; font-weight: bold; text-align: center; flex-shrink: 0; width: 100%; height: 100%; } </style> </head> <body > <div class="stepper-container"> <div class="stepper" data-vel-plugin="StepperPlugin" data-vel-view="stepper" data-vel-data-current-number="1" > <div class="numbers" data-vel-plugin="StepperPlugin" data-vel-view="numbers" > <div class="number">1</div> <div class="number">2</div> <div class="number">3</div> <div class="number">4</div> <div class="number">5</div> <div class="number">6</div> <div class="number">7</div> <div class="number">8</div> <div class="number">9</div> <div class="number">10</div> </div> </div> <svg class="arrow arrow-left" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background: new 0 0 256 256" fill="currentColor" xml:space="preserve" > <polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128 " /> </svg> <svg class="arrow arrow-right" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256" style="enable-background: new 0 0 256 256" fill="currentColor" xml:space="preserve" > <polygon points="79.093,0 48.907,30.187 146.72,12.........完整代码请登录后点击上方下载按钮下载查看
网友评论0