<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<script src="jquery.js"></script>
<title>jQuery时间轴节点分支提示代码 - 更多源码【www.96flw.com】</title>
<style type="text/css">
body{background: #020c1c;}
*{margin: 0;padding: 0;}
.w_1220{max-width: 1220px;min-width: 900px; width:96%;margin: 0 auto;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}
.disabled{cursor: not-allowed;}
.img{position: relative;}
.img em{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;cursor: pointer;}
.page2_area{margin: 60px auto;}
.page2{position: relative;width: 100%;height: 560px;}
.page2 ul{display: block;width: 100%;height: 100%;list-style: none;}
.page2_title {float: left;}
.page2_tab {float: right;color: #0393fb;font-size: 24px;border-bottom: 2px solid rgba(255, 255, 255, 0.2);padding-bottom: 8px;margin-top:15px;}
.page2_tab span {margin-left: 40px;cursor:pointer;}
.page2_tab span:hover{color:#fff;}
.page2_tab span:first-child {margin-left: 0px!important;}
.page2_tab .active {color:#fff;padding-bottom: 8px;border-bottom: 2px solid rgba(255, 255, 255,0.4);}
.page2_more{display: none;}
.page2_more.active{display: block;}
.page2_area .desc_area{font-size: 18px; line-height: 1.8;margin: 40px 0 0 20px;}
.page2 .time_point_list{height: 100%;}
.page2 .time_point_list:before,.page2 .time_point_list:after{position: absolute;width: 42.5%;height: 100%;content: "";background: url(page2_solid.png) top 60% center repeat-x;;}
.page2 .time_point_list:before{left: 0;}
.page2 .time_point_list:after{right: 0;}
.page2 .time_point_list{float: left;position: relative;}
.page2 .time_point{position: absolute;left: 42.5%;top: 50%;width: 15%;height: 20%;}
.page2 .time_point em{background-size: contain;}
.page2 .time_point em.disabled{cursor: not-allowed;}
.page2 .time_area{position: absolute;top: calc(60% + 25px);left: calc(50% - 80px);width: 80px;height: 110px;padding-top: 90px; background: url(page2_solid3.png) top right no-repeat;font-size: 16px;color: #fff;text-align: center;}
.page2 .txt_area{display: none; position: absolute;top: 0;left: 50%;height: 55%; color: #fff;background: url(page2_solid3.png) bottom left no-repeat;}
.page2 .time_point_list .light{display: none;-webkit-transition: all ease .8s; transition: all ease .8s;}
.page2 .time_point_list.active .txt_area,.page2 .time_point_list.active .light{display: block;}
.page2 .tips_area{position: relative;left: -90%;font-size: 16px;line-height: 1.8;white-space: nowrap; padding: 2px 14px;border-radius: 4px;background: rgba(3, 63, 178, 0.5);border: 1px solid rgba(255,255,255,0.5);}
.page2 .content_area{position: absolute;top: 0;bottom: 90px;left: 40px;padding: 20px;min-width: 330px; text-align: center;background: rgba(22, 48, 110, 0.4);border: 1px solid rgba(255,255,255,0.5);}
.page2 .content_area h3{font-size: 24px;color: #2ea9fc;margin-bottom: 20px;}
.page2 .line_block{white-space: nowrap;margin-top: 10px;}
.page2 .line_block span{font-size: 14px;margin: 10px;}
.page2 .line_block strong{font-size: 24px;font-weight: normal;}
.page2 .time_rang_area{position: absolute;top: calc(60% + 140px);left: 0;width: 100%;bottom: 0;color: #fff;}
.page2 .time_rang{display: none; position: absolute;text-align: center;}
.page2 .rang_version{height: 40px;line-height: 40px;font-size: 16px; background: rgba(255,255,255, 0.1);border: 1px solid rgba(255,255,255,0.5);border-radius: 40px;margin-bottom: 5px;}
.page2 .rang_content{color: #e88700;}
.page2 .rang_content strong{color: #fff;}
.page2 .time_point_list:last-child .txt_area,.page2 .reverse .txt_area{left: auto;right: 50%;background: url(page2_solid4.png) bottom right 1px no-repeat;}
.page2 .time_point_list:last-child .content_area,.page2 .reverse .content_area{left: auto;right: 40px;}
.page2 .time_point_list:last-child .tips_area,.page2 .reverse .tips_area{left: auto;right: -80%;}
</style>
</head>
<body>
<div class="w_1220 clearfix page2_area">
<div class="page2 clearfix">
<ul class="clearfix timePointArea">
<li class="time_point_list disabled" data-time="2019.01" style="width: 25%;">
<div class="time_point img">
<em class="disabled" style="background-image: url(page2_point2.png);"></em>
</div>
<div class="time_area">2019.01</div>
</li>
<li class="time_point_list enable active" data-time="2020.12" style="width: 33.3%;">
<div class="time_point img">
<em style="background-image: url(page2_point2.png);"></em>
<em class="light" style="background-image: url(page2_point3.png);"></em>
</div>
<div class="time_area">2020.12</div>
<div class="txt_area">
<div class="tips_area">便签文字内容1</div>
<div class="content_area">
<h3>阶段标题1</h3>
<div class="line_block">
<span><strong>ABC</strong>作用1</span>
<span><strong>ABC</strong>作用2</span>
</div>
<div class="line_block">
<span><strong>ABC</strong>作用3</span>
<span><strong>重要内容1</strong></span>
</div>
</div>
</div>
</li>
<li class="time_point_list enable" data-time="2022.08">
<div class="time_point img">
<em style="background-image: url(page2_point2.png);"></em>
<em class="light" style="background-image: url(page2_point3.png);"></em>
</div>
<div class="time_area">2022.08</div>
<div class="txt_area">
<div class="tips_area">便签文字内容2</div>
<div class="content_area">
<h3>阶段标题2</h3>
<div class="line_block">
<span><strong>BCD</strong>作用1</span>
<span><strong>BCD</strong>作用2</span>
</div>
<div class="line_block">
<span><strong>BCD</strong>作用3</span>
<span><strong>重要内容2</strong></span>
</div>
</div>
</div>
</li>
<li class="time_point_list enable" data-time="2024.08">
<div class="time_point img">
<em style="background-image: url(page2_point2.png);"></em>
<em class="light" style="background-image: url(page2_point3.png);"></em>
</div>
<div class="time_area">2024.08</div>
<div class="txt_area">
<div class="tips_area">便签文字内容3</div>
<div class="content_area">
<h3>阶段标题3</h3>
<div class="line_block">
<span><strong>CDE</strong>作用1</span>
<span><strong>CDE</strong>作用2</span>
</div>
<div class="line_block">
<span><strong>CDE</strong>作用3</span>
<span><strong>重要内容3</strong></span>
</div>
</div>
</div>
</li>
</ul>
<div class="time_rang_area timeRangeArea">
<article class="time_rang" data-range="2019.01/2020.12" style="display: block;">
<div class="rang_version">版本1.0</div>
<div class="rang_content">
<div class="line_block">
<span class="marginR15px">参数1<strong>123</strong></span>
<span>参数2<strong>123</strong></span>
</div>
</div>
</article>
<article class="time_rang" data-range="2020.12/2022.08">
<div class="rang_version">版本2.0</div>
<div class="rang_content">
<div class="line_block">
<span class="marginR15px">参数1<strong>234</strong></span>
<span>参数2<strong>234</strong></span>
</div>
</div>
</article>
<article class="time_rang" data-range="2022.08/2024.08">
<div class="rang_version">版本3.0</div>
<div class="rang_content">
<div class="line_block">
<spa
jQuery时间轴节点分支提示代码.zip
版权申诉
115 浏览量
2023-10-10
23:44:41
上传
评论
收藏 94KB ZIP 举报
jQuery时间轴节点分支提示代码.zip （7个子文件） 
jiaoben7571 
page2_solid.png 1KB page2_solid4.png 1KB page2_point2.png 2KB page2_solid3.png 1KB
index.html 11KB page2_point3.png 4KB
jquery.js 274KB资源评论
