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