html实现会拐弯的时间线，jquery实现会拐弯的时间线，css实现会拐弯的时间线

慕云枫

已于 2023-05-29 16:01:14 修改

阅读量612

点赞数 1

分类专栏：前端前后端同效果测试文章标签： jquery html javascript

于 2023-05-29 15:08:12 首次发布

本文链接：https://blog.csdn.net/weixin_43992507/article/details/130928528

版权

前端同时被 2 个专栏收录

94 篇文章 2 订阅

订阅专栏

前后端同效果测试

5 篇文章 0 订阅

订阅专栏

前言

jquery + html + css实现一个会拐弯的时间线
基于此网址整改，参考：https://www.jq22.com/webqd5873

效果

在这里插入图片描述

实现

基于jQuery，需要引入jQuery.js，没有必要使用太高版本，够用就行
jquery下载：https://www.jb51.net/zt/jquerydown.htm

html中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/timeLine.css" />
	</head>

	<body>

		<div class="clearfix time-wrapper"></div>
		<div style="padding: 20px;margin-top: 100px">
			<p>输入数量，生成时间线</p>
			<input type="number" class="test" value="0">
			<button id="btn">生成</button>
		</div>

	</body>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="js/timeLine.js"></script>

</html>

css中

* {
	word-wrap:break-word
}
html,body,h1,h2,h3,h4,h5,h6,hr,p,,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset {
	margin:0;
	padding:0
}
ul,ol,dl {
	list-style-type:none
}
html,body {
	*position:static
}
html {
	font-family:sans-serif;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%
}
address,caption,cite,code,dfn,em,th,var {
	font-style:normal;
	font-weight:400
}
input,button,textarea,select,optgroup,option {
	font-family:inherit;
	font-size:inherit;
	font-style:inherit;
	font-weight:inherit
}
input,button {
	overflow:visible;
	vertical-align:middle;
	outline:none
}
body,th,td,button,input,select,textarea {
	font-family:"Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
	font-size:14px;
	color:#333;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%
}
a,area {
	outline:none;
	blr:expression(this.=this.blur())
}
a {
	text-decoration:none;
	cursor:pointer
}
a:hover {
	text-decoration:underline;
	outline:none
}
a.ie6:hover {
	zoom:1
}
a:focus {
	outline:none
}
a:hover,a:active {
	outline:none
}
:focus {
	outline:none
}
sub,sup {
	vertical-align:baseline
}
button,input[type="button"],input[type="submit"] {
	line-height:normal !important
}
/*img*/
img {
	border:0;
	vertical-align:middle
}
a img,img {
	-ms-interpolation-mode:bicubic
}
.img-responsive {
	max-width:100%;
	height:auto
}
/*IE下a:hover 背景闪烁*/
*html {
	overflow:-moz-scrollbars-vertical;
	zoom:expression(function(ele) {
	ele.style.zoom = "1";
	document.execCommand("BackgroundImageCache",false,true)
}
(this))}/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend {
	display:block;
	margin:0;
	padding:0
}
time {
	display:inline
}
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}
audio:not([controls]) {
	display:none
}
legend {
	width:100%;
	margin-bottom:20px;
	font-size:21px;
	line-height:40px;
	border:0;
	border-bottom:1px solid #e5e5e5
}
legend small {
	font-size:15px;
	color:#999
}
svg:not(:root) {
	overflow:hidden
}
fieldset {
	border-width:0;
	padding:0.35em 0.625em 0.75em;
	margin:0 2px;
	border:1px solid #c0c0c0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
	height:auto
}
input[type="search"] {
	-webkit-appearance:textfield;
	/* 1 */-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box;
	/* 2 */box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
	-webkit-appearance:none
}
/*
Name:style_clearfix
Example:class="clearfix|cl"
Explain:Clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
table {
	border-collapse:collapse;
	border-spacing:0;
}
input:hover {
	border:1px solid #067BBB!important;
}
input:focus {
	border:1px solid #067BBB;
	outline:0;
}
.cl:after,.clearfix:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.cl,.clearfix {
	zoom:1
}
.btn {
	border:none;
	border-radius:4px;
	cursor:pointer;
}
.form-control {
	display:inline-block;
	width:100%;
	height:34px;
	margin:0 auto;
	box-sizing:border-box;
	padding:6px 12px;
	font-size:14px;
	line-height:34px;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-primary {
	background:rgb(46,117,183);
	color:#FFFFFF;
}
.btn-primary:hover {
	background:rgba(46,117,183,0.8);
}
.btn-default {
	background:#FFFFFF;
	border:1px solid #c9c9c9;
}
.left {
	float:left;
}
.right {
	float:right;
}
.time-wrapper {
	width:100%;
	padding:40px 60px;
	padding-top:100px;
	box-sizing:border-box;
}
.time-wrapper>div {
	width:100%;
	position:relative;
	margin-top:-2px;
}
.time-wrapper>div.first-group {
	margin-top:80px;
}
.odd-group .left-arrow {
	display:none;
	min-height:190px;
}
.odd-group .right-arrow {
	min-height:190px;
}
.even-group .right-arrow {
	display:none;
	min-height:190px;
}
.right-arrow {
	width: 190px;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
	border:2px solid #597dff;
	border-left:none;
	min-height:130px;
	box-sizing:border-box;
	float:right;
	position: relative;
    right: -58px;
}
.left-arrow {
	width: 190px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
	border:2px solid #597dff;
	border-right:none;
	min-height:130px;
	box-sizing:border-box;
	float:left;
	position: relative;
    left: -58px;
}
.even-group .left-arrow {
	min-height:190px;
}
.odd-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top:-122px;
}
.even-group .time-detail {
	position:absolute;
	left:30px;
	right:30px;
	top: -122px;
}
.g-line {
	height:2px;
	background:#597dff;
	position:absolute;
	left:30px;
	right:30px;
	top:0;
}
.time-detail .detail-c {
	width:20%;
	box-sizing:border-box;
	float:left;
	position:relative;
	padding:0 10px;
}
.floatRight .detail-c {
	float:right;
}
.time-detail .detail-c .circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #597dff;
    box-sizing: border-box;
    position: absolute;
    z-index: 99;
    background: #ffffff;
    bottom: -18px;
    top: auto;
}
.odd-group .circle {
	bottom:-19px;
}
.even-group .circle {
	top:-18px;
}
.time-detail .detail-c .circle .circle-son {
	width:6px;
	height:6px;
	border-radius:50%;
	background:#597dff;
	box-sizing:border-box;
	margin:2px;
}
.detail-m {
    max-width: 100%;
    display: inline-block;
    padding: 10px;
    background: #fbfbfb;
    box-sizing: border-box;
    border-radius: 5px;
    height: 110px;
   	background: #fff;
    box-shadow: #00000015 0 2px 5px 0;
}
.detail-m h3 {
	font-weight:bold;
}
.detail-m p {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.floatLeft .detail-c {
	float:left;
}
.disappear {
	display:none!important;
}

js中

$(function() {
    timeLine(6);
    $("#btn").click(function() {
        timeLine($(".test").val())
    })
})

function timeLine(num) {
    var timeHtml = '';
    var numUp = Math.ceil(num / 5);
    for (var i = 0; i < numUp; i++) {
        if ((i + 1) % 2 == 1 && i == 0) {
            timeHtml += '<div class="odd-group floatLeft first-group clearfix">'
        } else if ((i + 1) % 2 == 1) {
            timeHtml += '<div class="odd-group floatLeft clearfix">'
        } else {
            timeHtml += '<div class="even-group floatRight clearfix">'
        }
        timeHtml += '<div class="left-arrow"></div><div class="g-line"></div><div class="right-arrow"></div><div class="time-detail clearfix">'
        for (var j = 5 * i; j < 5 * (i + 1); j++) {
            if (j < num) {
                timeHtml += '<div class="detail-c">' +
                    '<div class="detail-m">' +
                    '<h3>' + (j + 1) + '</h3>' +
                    '<p>这里可以填充你需要的内容 (｡･ω･｡)ﾉ♡</p>' +
                    '</div>' +
                    '<div class="circle">' +
                    '<div class="circle-son"></div>' +
                    '</div>' +
                    '</div>'
            }
        }
        timeHtml += '</div></div>'
    }
    $(".time-wrapper").html(timeHtml);
    if ($(".time-wrapper>div:last-child").hasClass("even-group")) {
        $(".time-wrapper>div:last-child").find(".left-arrow").hide()
    } else if ($(".time-wrapper>div:first-child").hasClass("odd-group")) {
        $(".time-wrapper>div:last-child").find(".right-arrow").hide()
    }
    var circle = $(".circle");
    $(circle[0]).children(".circle-son").hide();
    $(circle[circle.length - 1]).children(".circle-son").hide();
}