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>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0