Javascript 如何在时间轴中创建滑块
在时间线中创建滑块的任何解决方案。evrey timeline的一部分有一个滑块,我只是想举个例子,因为我不知道怎么做,谢谢你的帮助Javascript 如何在时间轴中创建滑块,javascript,html,jquery,css,Javascript,Html,Jquery,Css,在时间线中创建滑块的任何解决方案。evrey timeline的一部分有一个滑块,我只是想举个例子,因为我不知道怎么做,谢谢你的帮助 标题 * { 保证金:0; 填充:0 } html{ 身高:100% } 氢{ 颜色:#2F8D46; } #形式{ 文本对齐:居中; 位置:相对位置; 利润上限:20px } #表单字段集{ 背景:白色; 边界:0无; 边界半径:0.5雷姆; 框大小:边框框; 宽度:100%; 保证金:0; 垫底:20px; 职位:相对 } .结束{ 文本对齐:居中 } #表单
标题
* {
保证金:0;
填充:0
}
html{
身高:100%
}
氢{
颜色:#2F8D46;
}
#形式{
文本对齐:居中;
位置:相对位置;
利润上限:20px
}
#表单字段集{
背景:白色;
边界:0无;
边界半径:0.5雷姆;
框大小:边框框;
宽度:100%;
保证金:0;
垫底:20px;
职位:相对
}
.结束{
文本对齐:居中
}
#表单字段集:非(:类型的第一个){
显示:无
}
#表单。上一步,。下一步{
宽度:100px;
字体大小:粗体;
颜色:白色;
边界:0无;
边界半径:0px;
光标:指针;
填充:10px 5px;
保证金:10px 5px 10px 0px;
浮球:对
}
.form,。上一步{
背景:#6161;
}
.form,。下一步{
背景#2F8D46;
}
#表单。上一步:悬停,
#前一步:聚焦{
背景色:#000000
}
#下一步:悬停,
#下一步:聚焦{
背景色:#2F8D46
}
.文本{
颜色:#2F8D46;
字体大小:正常
}
#进度条{
边缘底部:30px;
溢出:隐藏;
颜色:浅灰色
}
#progressbar.active{
颜色:#2F8D46
}
#李国宝{
列表样式类型:无;
字体大小:15px;
宽度:25%;
浮动:左;
位置:相对位置;
字号:400
}
#progressbar#步骤1:之前{
内容:“1”
}
#progressbar#步骤2:之前{
内容:“2”
}
#progressbar#步骤3:之前{
内容:“3”
}
#progressbar#步骤4:之前{
内容:“4”
}
#李:以前{
宽度:50px;
高度:50px;
线高:45px;
显示:块;
字体大小:20px;
颜色:#ffffff;
背景:浅灰色;
边界半径:50%;
保证金:0自动10px自动;
填充:2件
}
#李:之后呢{
内容:'';
宽度:100%;
高度:2倍;
背景:浅灰色;
位置:绝对位置;
左:0;
顶部:25px;
z指数:-1
}
#progressbar li.主动:之前,
#progressbar li.活动:之后{
背景:#2F8D46
}
.进展{
高度:20px
}
.进度条{
背景色:#2F8D46
}
-
步骤1
- 步骤2
- 步骤3
- 步骤4
欢迎使用步骤1
欢迎使用步骤2
欢迎来到第三步
完成
$(文档).ready(函数(){
var currentGfgStep,nextGfgStep,previousGfgStep;
var不透明度;
无功电流=1;
变量步长=$(“字段集”).length;
设置进度条(当前);
$(“.next step”)。单击(函数(){
currentGfgStep=$(this.parent();
nexttgfgstep=$(this.parent().next();
$(“#progressbar li”).eq($(“字段集”)
.index(nextGfgStep)).addClass(“活动”);
nextGfgStep.show();
currentGfgStep.animate({opacity:0}{
步骤:功能(现在){
不透明度=1-现在;
currentGfgStep.css({
“显示”:“无”,
“位置”:“相对”
});
css({'opacity':opacity});
},
持续时间:500
});
设置进度条(++电流);
});
$(“.previous step”)。单击(函数(){
currentGfgStep=$(this.parent();
previousGfgStep=$(this.parent().prev();
$(“#progressbar li”).eq($(“字段集”)
.index(currentGfgStep)).removeClass(“活动”);
previousGfgStep.show();
currentGfgStep.animate({opacity:0}{
步骤:功能(现在){
不透明度=1-现在;
currentGfgStep.css({
“显示”:“无”,
“位置”:“相对”
});
css({'opacity':opacity});
},
持续时间:500
});
设置进度条(--电流);
});
功能设置进度条(currentStep){
var百分比=浮动(100/步)*电流;
百分比=固定的百分比();
$(“.progress bar”)
.css(“宽度”,百分比+“%”)
}
$(“.submit”)。单击(函数(){
返回false;
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE</title>
</head>
<style>
* {
margin: 0;
padding: 0
}
html {
height: 100%
}
h2{
color: #2F8D46;
}
#form {
text-align: center;
position: relative;
margin-top: 20px
}
#form fieldset {
background: white;
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}
.finish {
text-align: center
}
#form fieldset:not(:first-of-type) {
display: none
}
#form .previous-step, .next-step {
width: 100px;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 0px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px 10px 0px;
float: right
}
.form, .previous-step {
background: #616161;
}
.form, .next-step {
background: #2F8D46;
}
#form .previous-step:hover,
#form .previous-step:focus {
background-color: #000000
}
#form .next-step:hover,
#form .next-step:focus {
background-color: #2F8D46
}
.text {
color: #2F8D46;
font-weight: normal
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
color: lightgrey
}
#progressbar .active {
color: #2F8D46
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar #step1:before {
content: "1"
}
#progressbar #step2:before {
content: "2"
}
#progressbar #step3:before {
content: "3"
}
#progressbar #step4:before {
content: "4"
}
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1
}
#progressbar li.active:before,
#progressbar li.active:after {
background: #2F8D46
}
.progress {
height: 20px
}
.progress-bar {
background-color: #2F8D46
}
</style>
<body>
<link href=
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<script src=
'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js'>
</script>
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'>
</script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="col-11 col-sm-9 col-md-7
col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
<div class="px-0 pt-4 pb-0 mt-3 mb-3">
<form id="form">
<ul id="progressbar">
<li class="active" id="step1">
<strong>Step 1</strong>
</li>
<li id="step2"><strong>Step 2</strong></li>
<li id="step3"><strong>Step 3</strong></li>
<li id="step4"><strong>Step 4</strong></li>
</ul>
<div class="progress">
<div class="progress-bar"></div>
</div> <br>
<fieldset>
<h2>Welcome To Step 1</h2>
<input type="button" name="next-step"
class="next-step" value="Next Step" />
</fieldset>
<fieldset>
<h2>Welcome To Step 2</h2>
<input type="button" name="next-step"
class="next-step" value="Next Step" />
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
<fieldset>
<h2>Welcome To Step 3</h2>
<input type="button" name="next-step"
class="next-step" value="Final Step" />
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
<fieldset>
<div class="finish">
<h2 class="text text-center">
<strong>FINISHED</strong>
</h2>
</div>
<input type="button" name="previous-step"
class="previous-step"
value="Previous Step" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var currentGfgStep, nextGfgStep, previousGfgStep;
var opacity;
var current = 1;
var steps = $("fieldset").length;
setProgressBar(current);
$(".next-step").click(function () {
currentGfgStep = $(this).parent();
nextGfgStep = $(this).parent().next();
$("#progressbar li").eq($("fieldset")
.index(nextGfgStep)).addClass("active");
nextGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
nextGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(++current);
});
$(".previous-step").click(function () {
currentGfgStep = $(this).parent();
previousGfgStep = $(this).parent().prev();
$("#progressbar li").eq($("fieldset")
.index(currentGfgStep)).removeClass("active");
previousGfgStep.show();
currentGfgStep.animate({ opacity: 0 }, {
step: function (now) {
opacity = 1 - now;
currentGfgStep.css({
'display': 'none',
'position': 'relative'
});
previousGfgStep.css({ 'opacity': opacity });
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(currentStep) {
var percent = parseFloat(100 / steps) * current;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
$(".submit").click(function () {
return false;
})
});
</script>
</html>