jquery+css实现可折叠行程轨迹时间轴时间线效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：jquery+css实现可折叠行程轨迹时间轴时间线效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <style>
        @charset "utf-8";
    * {
    	margin:0;
    	padding:0;
    	list-style-type:none;
    }
    a, img {
    	border:0;
    }
    body {
    	font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
    	background: white;
    }
    .demo {
    	width:960px;
    	margin:60px auto 0 auto;
    }
    /*history*/
    .history {
    	background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/line04.gif) repeat-y 187px 0;
    	overflow:hidden;
    	position:relative;
    }
    .history-date {
    	overflow:hidden;
    	position:relative;
    }
    .history-date h2 {
    	background:#fff url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon06.gif) no-repeat 158px 0;
    	height:59px;
    	font-size:25px;
    	font-family:微软雅黑;
    	font-weight:normal;
    	padding-left:45px;
    	margin-bottom:74px;
    }
    .history-date h2.first {
    	position:absolute;
    	left:0;
    	top:0;
    	width:500px;
    	z-index:99;
    }
    .history-date h2 a {
    	color:#00bbff;
    	display:inline-block;
    *display:inline;
    	zoom:1;
    	background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon08.gif) no-repeat right 50%;
    	padding-right:17px;
    	margin:21px 97px 0 0;
    }
    .history-date h2 a:hover {
    	text-decoration:none;
    }
    .history-date h2 img {
    	vertical-align:-5px;
    }
    .history-date h2.date02 {
    	background:none;
    }
    .history-date ul li {
    	background:url(//repo.bfw.wiki/bfwrepo/images/yaohao/icon07.gif) no-repeat 180px 0;
    	padding-bottom:50px;
    	zoom:1;
    }
    .history-date ul li.last {
    	padding-bottom:0;
    }
    .history-date ul li:after {
    	content:" ";
    	display:block;
    	height:0;
    	clear:both;
    	visibility:hidden;
    }
    .history-date ul li h3 {
    	float:left;
    	width:168px;
    	text-align:right;
    	padding-right:19px;
    	color:#c3c3c3;
    	font:normal 18px/16px Arial;
    }
    .history-date ul li h3 span {
    	display:block;
    	color:#d0d0d0;
    	font-size:12px;
    }
    .history-date ul li dl {
    	float:left;
    	padding-left:41px;
    	margin-top:-5px;
    	font-family:微软雅黑;
    }
    .history-date ul li dl dt {
    	font:20px/22px 微软雅黑;
    	color:#737373;
    }
    .history-date ul li dl dt span {
    	display:block;
    	color:#787878;
    	font-size:12px;
    }
    .history-date ul li.green h3 {
    	color:#1db702;
    }
    .history-date ul li.green h3 span {
    	color:#a8dda3;
    }
    .history-date ul li.green dl {
    	margin-top:-8px;
    }
    .history-date ul li.green dl dt {
    	font-size:30px;
    	line-height:28px;
    }
    .history-date ul li.green dl dt a {
    	display:inline-block;
    *display:inline;
    	zoom:1;
    	overflow:hidden;
    	vertical-align:middle;
    	margin-left:12px;
    }
    .history-date ul li.green dl dd {
    	padding-top:20px;
    	display:none;
    }
    .history-date ul li.green dl dd img {
    	float:left;
    }
    .history-date ul li.green dl dd p {
    	overflow:hidden;
    	zoom:1;
    	line-height:21px;
    	color:#787878;
    }
    .history-date h2.first .more-history {
    	font-size:16px;
    	background:transparent;
    	margin-left:30px;
    }
    .history-date h2.first .more-history:hover {
    	text-decoration:underline;
    }
    *body .history-date ul li dl dt {
    	_font-size:12px!important;
    	_font-weight:bold;
    }
    *body .history-date ul li dl dt span {
    	_font-weight:normal!important;
    }
    *body .history-date ul li.green dl dt a {
    	_background:transparent!important;
    *background:transparent!important;
    *font-size:12px!important;
    	_font-weight:normal!important;
    }
    </style>
</head>

<body>

    <div class="history" style="margin-top:50px;height:3000px;">
        <div class="history-date">
            <ul>
                <h2 class="first"> <a href="#nogo">2月19日</a> <b>忻州王某某行程轨迹</b>
                </h2>
                <li class="green">
                    <h3>10:08<span>2月19日</span></h3>
                    <dl>
                        <dt><span>从×××高速口下高速</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>22:00<span>2月19日</span></h3>
                    <dl>
                        <dt><span>入住迎泽区朝阳××××××酒店 </span></dt>
                    </dl>
                </li>
                <li>
                    <h3>22:03<span>2月19日</span></h3>
                    <dl>
                        <dt><span>布丁酒店门口××××××面馆吃饭</span></dt>
                    </dl>
                </li>
                <li class="green">
                    <h3>22:22<span>2月19日</span></h3>
                    <dl>
                        <dt><span>返回酒店休息</span></dt>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="history-date">
            <ul>
                <h2 class="date02"> <a href="#nogo">2月20日</a> <b>行程轨迹</b></h2>
                <li class="green">
                    <h3>11:00<span>2月20日</span></h3>
                    <dl>
                        <dt><span>退房，自驾车前往××××××区桥东街路边停车场停车</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>12:00~12:37<span>2月20日</span></h3>
                    <dl>
                        <dt><span>在×××区桥东街××××××饭店就餐</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>13:00~13:30<span>2月20日</span></h3>
                    <dl>
                        <dt>×××区桥东街时尚精剪理发</dt>
                    </dl>
                </li>
                <li>
                    <h3>13:30~13:38<span>2月20日</span></h3>
                    <dl>
                        <dt><span>×××区桥东街梦想空间×××超市购物</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>13:53~14:02<span>2月20日</span></h3>
                    <dl>
                        <dt>驾车到小店区并州南路西一巷核七院×××店购物</dt>
                    </dl>
                </li>
                <li>
                    <h3>14:10~14:26<span>2月20日</span></h3>
                    <dl>
                        <dt><span>开车到×××停车场，绕一圈后未下车离开停车场</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>14:27~19:00<span>2月20日</span></h3>
                    <dl>
                        <dt><span>自驾车到××××××镇未下车，后返回太原</span></dt>
                    </dl>
                </li>
                <li>
                    <h3>19:20左右<span>2月20日</span></h3>
                    <dl>
                        <dt><span>小店区×××××××××酒店</span></dt>
                    </dl>
                </li>
                <li class="green">
                    <h3>19:28<span>2月20日</span></h3>
                    <dl>
                        <dt>小店区寇庄西路头道巷×××炒面馆就餐,后返回酒店休息</dt>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="histor.........完整代码请登录后点击上方下载按钮下载查看