jquery实现左右横向大事记时间轴效果代码
代码语言：html
所属分类：其他
代码描述：jquery实现左右横向大事记时间轴效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,body{width: 100%;height: 100%;font-family: "microsoft yahei";overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling : touch;background: #f3f3f3;}
*,body,html,dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,header,section,article,footer,td,th{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%}
a{text-decoration:none;outline: none;}
a:hover{text-decoration:none;text-underline: none;}
img{border:0}
ul,li{list-style: none;}
i{font-style: normal;}
table{border-collapse:collapse;border-spacing:0}
button{cursor: pointer;}
input,select,button,a,textarea{border: 0;outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
input:-moz-placeholder{color: #c9c9c9;}
input:-ms-input-placeholder{color: #c9c9c9;}
input::-webkit-input-placeholder{color: #c9c9c9;}
/*公共样式结束*/
.body-box{width:1200px;margin:100px auto;background: #fff;}
.timer-shaft-box{width:100%;padding:30px 40px;box-sizing: border-box;}
.timer-shaft{position:relative;width:100%;height:80px;overflow: hidden;}
.timer-left{position:absolute;top:50%;left:20px;z-index:99;width:23px;height:37px;margin-top:-18.5px;background: url(//repo.bfw.wiki/bfwrepo/images/event/icon_left.png) no-repeat;background-size: cover;cursor:pointer;}
.timer-right{position:absolute;top:50%;right:20px;z-index:99;width:23px;height:37px;margin-top:-18.5px;background: url(//repo.bfw.wiki/bfwrepo/images/event/icon_right.png) no-repeat;background-size: cover;cursor:pointer;}
.timer-scale{position:absolute;top:0;left:0;height:80px;padding-left: 80px;font-size: 0;white-space: nowrap;}
.timer-scale-cont{display:inline-block;height:100%;line-height:80px;}
.time-circle{display:inline-block;vertical-align:middle;width:60px;height:60px;line-height: 60px;text-align: center;font-size:18px;color:#fff;border-radius: 50%;background: #e2302e;transition: all .3s;cursor:pointer;}
.timer-scale-cont.hov .time-circle{width:80px;height:80px;line-height: 80px;font-size:24px;background: #ff8d3d;}
.line-scale{display:inline-block;vertical-align:middle;width:150px;height:22px;margin:0 2px;background: url(//repo.bfw.wiki/bfwrepo/images/event/icon_scale.png) no-repeat;background-size: cover;}
.timer-shaft-content{width:100%;margin-top:45px;overflow: hidden;font-size:0;box-sizing:border-box;white-space: nowrap;}
.shaft-detail-cont{display: none;width:100%;}
.timer-year{padding-left:20px;font-weight:bold;color:#333;font-size:0;}
.icon-year{display: inline-block;vertical-align:middle;width:33px;height:40px;background: url(//repo.bfw.wiki/bfwrepo/images/event/icon_sign.png) no-repeat;background-size: cover;}
.timer-year span{display: inline-block;vertical-align:middle;margin-left:18px;font-size:24px;}
.month-detail-box{position:relative;width:100%;min-height:93px;padding-top:30px;font-size:0;box-sizing: border-box;white-space: normal;}
.month-detail-box:before{content: '';position:absolute;top:0;left:36.5px;height:100%;border-right:1px dashed #ff8d3d;}
.month-detail-box .month-title{position:absolute;font-size:16px;font-weight: bold;color:#333;}
.month-detail-box .month-title:before{content: '';position:absolute;top:50%;left:30px;width:13px;height:13px;margin-top:-6.5px;background: url(//repo.bfw.wiki/bfwrepo/images/event/icon_circle.png) no-repeat;background-size: cover;}
.incident-record{display:inline-block;padding-left:71px;line-height:2;font-size:14px;color:#333;}
.incident-record a{font-size:14px;color:#1d69a3;}
</style>
</head>
<body>
<div class="body-box">
<div class="timer-shaft-box">
<div class="timer-shaft">
<div class="timer-left"></div>
<div class="timer-right"></div>
<div class="timer-scale">
<div class="timer-scale-cont hov">
<p class="time-circle">2018</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2017</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2016</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2015</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2014</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2013</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2012</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2011</p>
<p class="line-scale"></p>
</div>
<div class="timer-scale-cont">
<p class="time-circle">2010</p>
<p class="line-scale"></p>
</div>
</div>
</div>
<div class="timer-shaft-content">
<div class="shaft-detail-cont" style="display: block;">
<p class="timer-year"><i class="icon-year"></i><span>2018年</span></p>
<div class="month-detail-box">
<span class="month-title">1月</span>
<p class="incident-record">1月21日、22日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件</p>
</div>
<div class="month-detail-box">
<span class="month-title">2月</span>
<p class="incident-record">2月1日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">3月</span>
<p class="incident-record">3月8日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件</p>
<p class="incident-record">3月10日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">4月</span>
<p class="incident-record">4月1日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">5月</span>
<p class="incident-record">5月11日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">6月</span>
<p class="incident-record">6月2日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">7月</span>
<p class="incident-record">7月2日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">8月</span>
<p class="incident-record">8月2日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
<div class="month-detail-box">
<span class="month-title">9月</span>
<p class="incident-record">9月2日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件
<a href="#">
<查看全部>
</a>
</p>
</div>
</div>
<div class="shaft-detail-cont">
<p class="timer-year"><i class="icon-year"></i><span>2017年</span></p>
<div class="month-detail-box">
<span class="month-title">1月</span>
<p class="incident-record">1月21日、22日，大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件大事件。</p>
</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0