[英]How To Create a slider into timeline
any solution to create a slider into timeline.将 slider 创建到时间线中的任何解决方案。 evrey part of timeline had a slider Just want an example because I didn't know how to do it and thank you for help timeline and slider like that时间线的 evrey 部分有一个 slider 只是想要一个例子,因为我不知道该怎么做,谢谢你的帮助时间线和 slider 这样
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.