HTML5+JQ+CSS3垂直滚动时间轴代码
1、新建html文档。
2、书写hmtl代码。
<ul class="timeline">
<li class="bar"></li>
</ul>
<div class="container">
<section>
<h1>首页</h1>
<h2>首页首页首页</h2>
首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页首页
</section>
<section">
<h1>公司介绍</h1>
<h2>公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍公司介绍</h2>
</section>
<section>
<h1>案例</h1>
<h2>案例案例案例案例案例案例案例案例案例</h2>
</section>
<section>
<h1>招聘中心</h1>
<h2>招聘中心</h2>
招聘中心招聘中心招聘中心招聘中心招聘中心招聘中心招聘中心招聘中心
</section>
<section>
<h1>关于我们</h1>
<h2>关于我们关于我们关于我们关于我们关于我们关于我们</h2>
关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们关于我们
</section>
<section>
<h1>联系我们</h1>
<h2>联系我们</h2>
联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们联系我们
</section>
</div>
3、书写css代码。
<style>
body { background: #32384f; padding: 0; margin: 0; color: #FFF; height: 500px }
h1 { font-size: 56px; font-weight: 400; color: #7045ff; position: relative; }
h1:after { content: ""; padding-bottom: 30px; display: block; border-bottom: 1px solid #464c63; width: 60%; }
h2 { font-size: 36px; font-weight: 100; color: #83ffe1; position: relative; }
img { max-width: 100%; }
.timeline { margin: 0; padding: 0; list-style: none; position: fixed; left: 100px; top: 5%; width: 1px; height: 90%; background: #464c63; }
.timeline .bar { position: absolute; width: 1px; background-color: #fcf769; top: 0; left: 0; z-index: 0; }
.container { padding-left: 200px; }
section { border-top: 2px solid #fcf769; padding: 20px; font-size: 16px; font-weight: 200; font-family: "Montserrat"; }
p { line-height: 2; }
.node { position: absolute; width: 3px; height: 3px; background: #FFF; left: -1px; z-index: 1; cursor: pointer; border-radius: 3px; }
.node:hover { background: #46ffdd; }
.node:hover span { opacity: 1; }
.node:before { content: ""; position: absolute; width: 9px; height: 9px; left: -3px; top: -3px; }
.node span { transition: all 0.4s ease-out; text-transform: uppercase; right: 4px; top: -16px; color: #FFFFFF; position: absolute; padding: 10px; white-space: nowrap; font-size: 14px; font-weight: 200; font-family: "Montserrat"; opacity: 0; }
</style>
4、书写hmtl代码。
5、书写js代码。引用<script src="js/jquery.min.js"></script>
<script>
"use strict";
$(function () {
function sumSection() {
return $(".container").height();
}
function setDimensionBar() {
$(".bar").css({
"height": $(window).height() / sumSection() * 100 + "%"
});
}
function setSection() {
$.each($("section"), function (i, element) {
$(element).css({
"min-height": $(window).height()
});
});
}
function addBehaviours() {
var sections = $("section");
$.each($(".node"), function (i, element) {
$(element).on("click", function (e) {
e.preventDefault();
var scroll = $(sections[i]).offset().top;
$('html, body').animate({
scrollTop: scroll
}, 500);
});
});
}
function arrangeNodes() {
$(".node").remove();
$.each($("section"), function (i, element) {
var name = $(element).data("name");
var node = $("<li class='node'><span>" + name + "</span></li>");
$(".timeline").append(node);
$(node).css({
"top": $(".timeline").height() / $(document).height() * $(element).offset().top
});
});
addBehaviours();
}
$(window).on("scroll", function () {
var top = window.scrollY / sumSection() * 100;
$(".bar").css({
"top": top + "%"
});
});
$(window).on("resize", function () {
setSection();
arrangeNodes();
setDimensionBar();
});
setTimeout(function () {
setSection();
arrangeNodes();
setDimensionBar();
}, 200);
});
</script>
6、代码整体结构。
7、查看效果。
