模信插件:https://www.helloweba.net/javascript/246.html
https://www.helloweba.net/demo/findcontent/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="record_list">
<div class="search_bar">
<div class="time">
<input id="strat_time" type="text" placeholder="时间" readonly="">
<i class="iconfont icon-crm-calender"></i>
</div>
<span>至</span>
<div class="time">
<input id="end_time" type="text" placeholder="时间" readonly="">
<i class="iconfont icon-crm-calender"></i>
</div>
<input id="search_input" style="margin-left: 20px;width:200px" type="text" placeholder="请输入关键词搜索">
<div class="tipsClass"></div>
</div>
<div class="record_time">
<ul id="record_time_line" style="padding:20px 3px;position: relative;">
<li style="width:80px;" class="top_0">
<div class="year" style="color: rgb(51, 198, 192);">2018</div>
<div style="position: relative; height: 324.5px; border-top-color: rgb(51, 198, 192);" class="ct_row top">
<span style="top: -11px; border: 8px solid rgb(51, 198, 192);" class="circle"></span>
</div>
</li>
<li style="margin-left:-4px;" class="upGroup top_0">
<div class="ct_row" style="height: 324.5px;"></div>
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(51, 198, 192);">
<div style="position: relative; max-height: 324.5px; border-left-color: rgb(51, 198, 192);" class="ct_row2">
<p class="eve_time">11/14 08:00
<img class="configImg" src="/assets/new_base/images/entry.png"></p>
<p class="eve_title">入职</p>
<p class="eve_desc"></p>
<div class="eve_img"></div>
<em>团成</em>
<span style="bottom: -3px; border: 5px solid rgb(51, 198, 192);" class="circle on"></span>
<div class="operation">
<span id="5bf60a4dfdb0ed18594b8ce6" class="displayMenu">设为隐藏</span></div>
<div style="display: none; height: 144px;" class="maskLayer"></div>
</div>
</div>
</li>
<li style="display:none"></li>
<li style="width:80px;margin-left:-4px;" class="top_0">
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(51, 198, 192);"></div>
</li>
<li style="width:80px;" class="top_1">
<div class="year" style="color: rgb(85, 141, 241);">2019</div>
<div style="position: relative; height: 324.5px; border-top-color: rgb(85, 141, 241);" class="ct_row top">
<span style="top: -11px; border: 8px solid rgb(85, 141, 241);" class="circle"></span>
</div>
</li>
<li style="margin-left:-4px;" class="upGroup top_1">
<div class="ct_row" style="height: 324.5px;"></div>
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(85, 141, 241);">
<div style="position: relative; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/16 08:00
<img classd="configImg.on"></p>
<p class="eve_title">你好世界啊</p>
<p class="eve_desc">加油,外卖~~~~</p>
<div class="eve_img">
<img src="5c6aa3dbb29e1a2e6538a762">
<span class="imgTotal">共1张</span></div>
<em></em>
<span style="bottom: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation" style="display: none;">
<span id="5c6aa3e8b29e1a2e6538a765" class="displayMenu">设为隐藏</span>
<span id="5c6aa3e8b29e1a2e6538a765" class="editMenu">编辑</span>
<span id="5c6aa3e8b29e1a2e6538a765" class="delMenu">删除</span></div>
<div style="display: none; height: 312px;" class="maskLayer"></div>
</div>
</div>
</li>
<li style=" margin-left: -5px; " class="top_1">
<div style="position: relative; height: 324.5px; border-bottom-color: rgb(85, 141, 241);" class="ct_row bottom">
<div style="position: absolute; left: 0px; bottom: 0px; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/20 08:00
<img classd="configImg.on"></p>
<p class="eve_title">哈哈嘻嘻,别逗</p>
<p class="eve_desc">别傻,好好的</p>
<div class="eve_img"></div>
<em></em>
<span style="top: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation" style="display: none;">
<span id="5c6a58f697447215b5aeab04" class="displayMenu">设为隐藏</span>
<span id="5c6a58f697447215b5aeab04" class="editMenu">编辑</span>
<span class="delMenu">删除</span></div>
<div style="display: none; height: 172px;" class="maskLayer down"></div>
</div>
</div>
<div class="ct_row" style="height: 324.5px;"></div>
</li>
<li style="margin-left:-4px;" class="upGroup top_1">
<div class="ct_row" style="height: 324.5px;"></div>
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(85, 141, 241);">
<div style="position: relative; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/20 08:00
<img classd="configImg.on"></p>
<p class="eve_title">表哥,表弟一家亲</p>
<p class="eve_desc">奔跑吧兄弟</p>
<div class="eve_img">
<img src="5c6a5efb1a921a16cc592ae5">
<span class="imgTotal">共1张</span></div>
<em></em>
<span style="bottom: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation" style="display: none;">
<span id="5c6a5f081a921a16cc592ae8" class="displayMenu">设为隐藏</span>
<span id="5c6a5f081a921a16cc592ae8" class="editMenu">编辑</span>
<span id="5c6a5f081a921a16cc592ae8" class="delMenu">删除</span></div>
<div style="display: none; height: 312px;" class="maskLayer"></div>
</div>
</div>
</li>
<li style=" margin-left: -5px; " class="top_1">
<div style="position: relative; height: 324.5px; border-bottom-color: rgb(85, 141, 241);" class="ct_row bottom">
<div style="position: absolute; left: 0px; bottom: 0px; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/20 08:00
<img classd="configImg.on"></p>
<p class="eve_title">表哥,表弟一家亲</p>
<p class="eve_desc">奔跑吧兄弟</p>
<div class="eve_img">
<img src="5c6a5efb1a921a16cc592ae5">
<span class="imgTotal">共1张</span></div>
<em></em>
<span style="top: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation">
<span id="5c6a5f731a921a16cc592aeb" class="displayMenu">设为隐藏</span>
<span id="5c6a5f731a921a16cc592aeb" class="editMenu">编辑</span>
<span class="delMenu">删除</span></div>
<div style="display: none; height: 312px;" class="maskLayer down"></div>
</div>
</div>
<div class="ct_row" style="height: 324.5px;"></div>
</li>
<li style="margin-left:-4px;" class="upGroup top_1">
<div class="ct_row" style="height: 324.5px;"></div>
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(85, 141, 241);">
<div style="position: relative; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/20 08:00
<img classd="configImg.on"></p>
<p class="eve_title">098765432dd1</p>
<p class="eve_desc">88776787888</p>
<div class="eve_img">
<img src="5c6a97221a921a16cc592fa5">
<span class="imgTotal">共1张</span></div>
<em></em>
<span style="bottom: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation">
<span id="5c6a97271a921a16cc592fa8" class="displayMenu">设为隐藏</span>
<span id="5c6a97271a921a16cc592fa8" class="editMenu">编辑</span>
<span id="5c6a97271a921a16cc592fa8" class="delMenu">删除</span></div>
<div style="display: none; height: 312px;" class="maskLayer"></div>
</div>
</div>
</li>
<li style=" margin-left: -5px; " class="top_1">
<div style="position: relative; height: 324.5px; border-bottom-color: rgb(85, 141, 241);" class="ct_row bottom">
<div style="position: absolute; left: 0px; bottom: 0px; max-height: 324.5px; border-left-color: rgb(85, 141, 241);" class="ct_row2">
<p class="eve_time">02/20 08:00
<img classd="configImg.on"></p>
<p class="eve_title">098765432dd1</p>
<p class="eve_desc">88776787888</p>
<div class="eve_img">
<img src="5c6a97221a921a16cc592fa5">
<span class="imgTotal">共1张</span></div>
<em></em>
<span style="top: -3px; border: 5px solid rgb(85, 141, 241);" class="circle on"></span>
<div class="operation">
<span id="5c6a979b1a921a16cc592fab" class="displayMenu">设为隐藏</span>
<span id="5c6a979b1a921a16cc592fab" class="editMenu">编辑</span>
<span class="delMenu">删除</span></div>
<div style="display: none; height: 312px;" class="maskLayer down"></div>
</div>
</div>
<div class="ct_row" style="height: 324.5px;"></div>
</li>
<li style="width:80px;margin-left:-4px;" class="top_1">
<div class="ct_row top" style="height: 324.5px; border-top-color: rgb(85, 141, 241);"></div>
</li>
</ul>
<div id="tip"></div>
</div>
<div class="year_li">
<a class="year_item action">
<div class="y_round"></div>
<span>2018</span></a>
<a class="year_item">
<div class="y_round"></div>
<span>2019</span></a>
</div>
</div>
</body>
</html>
<style>
.record_time{
width: 100%;
overflow: hidden;
overflow-x:scroll;
position: relative;
}
#record_list ul {
width:6000px;
display: block;
position: relative;
top:0;
left: 0;
/* overflow: auto;
white-space:nowrap; */
}
#record_list li{
/**list-style: none;*/
display: inline-block;
width: 175px;
vertical-align: bottom;
}
.ct_row2{
border-left:1px solid #28D1CA;
overflow: auto;white-space: normal;
padding: 20px 0 20px 20px;
overflow-x:visible;
overflow-y:visible;
box-sizing: border-box;
}
.year{
font-size: 30px;
padding-bottom: 25px;
color: #33C6C0;
}
.circle{
border: 8px solid #28D1CA;
border-radius: 50%;background: white;
display: inline-block;
position: absolute;
left: -3px;
}
.circle.on{
border: 5px solid #28D1CA;
left: -6px;
}
.circle.oy{
border: 5px solid #28D1CA;
}
.ct_row.top{
border-top: 6px solid #28d1ca;
}
.ct_row.bottom{
border-bottom: 6px solid #28d1ca;
}
.ct_row2 .eve_time{
height:20px;
font-size:18px;
font-family:Arial-BoldMT;
font-weight:normal;
color:rgba(51,51,51,1);
line-height:21px;
position: relative;
}
.ct_row2 .eve_title{
height:28px;
font-size:14px;
font-family:STHeiti;
color:rgba(51,51,51,1);
line-height:14px;
}
.ct_row2 .eve_desc{
max-height:90px;
font-size:12px;
font-family:STXihei;
color:rgba(153,153,153,1);
line-height:16px;
}
.ct_row2 .eve_img{
position: relative;
max-width: 140px;
max-height: 140px;
}
.ct_row2 .eve_img img{
width: 140px;
height: 140px;
}
.imgTotal{
position: absolute;
bottom: 5px;
left: 5px;
width: auto;
height: 16px;
font-size:10px;
color: #fff;
line-height: 16px;
padding: 6px;
background:#000;
border-radius:11px;
opacity:0.4;
}
.ct_row2 em{
height:12px;
font-size:12px;
font-family:STXihei;
color:rgba(102,102,102,1);
line-height:12px;
margin-top: 10px;
display: inline-block;
width: 130px;
text-align: right;
}
.line_title_bar {
height:50px;
background:rgba(255,255,255,1);
border-bottom: 1px solid #EEEEEE
}
.line_title_bar > span {
height:18px;
font-size:18px;
font-family:STHeiti;
color:rgba(51,51,51,1);
line-height: 50px;
}
.title_item {
display:inline-block;
line-height: 50px;
cursor: pointer;
float:right;
}
.title_item > *{
margin: 0 10px;
}
.title_item .see_other {
height:14px;
font-size:14px;
font-family:STXihei;
color:rgba(48,117,241,1);
line-height:14px;
}
.title_item .establish {
height:14px;
font-size:14px;
font-family:STXihei;
color:rgba(48,117,241,1);
line-height:14px;
padding:0px 20px;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
}
.title_item .open_sp {
height:14px;
font-size:14px;
font-family:STXihei;
color:rgba(102,102,102,1);
line-height:14px;
}
.time {
display: inline-block;
position: relative;
}
.search_bar {
margin-top: 20px;
height: 30px;
line-height: 30px;
position: relative;
}
.search_bar span {
width:14px;
height:30px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(102,102,102,1);
line-height:30px;
margin: 0px 10px;
}
.search_bar .time i {
position: absolute;
top: 8px;
right: 10px;
color: #ccc;
font-size: 16px;
}
.search_bar input {
width:120px;
height:30px;
border-radius:2px;
border:1px solid rgba(221,221,221,1);
padding-top: 0px;
padding-bottom: 0px;
}
.frame {
width:360px;
background:rgba(255,255,255,1);
box-shadow:-4px 2px 8px 0px rgba(0,0,0,0.16);
padding:10px 0px;
position: fixed;
right: -360px;
top: 44px;
bottom: 0px;
transition: all 0.3s;
}
.open {
right: 0 !important;
}
.frame_head{
padding:0px 20px;
height:50px;
background:rgba(255,255,255,1);
border-bottom: 1px solid #EEEEEE;
line-height: 50px;
}
.frame_head span {
height:16px;
font-size:16px;
font-family:STHeiti;
color:rgba(51,51,51,1);
line-height:16px;
}
.frame_head i {
opacity:0.99;
float: right;
cursor: pointer;
line-height: 50px;
}
.sub_div {
overflow: auto;
padding: 10px 0px;
}
.sub_div .sub_head{
height: 40px;
line-height: 40px;
border-bottom: 1px solid #EEEEEE;
padding: 0px 5px;
}
.sub_div .sub_head span {
display: inline-block;
width: 95px;
text-align: center;
height:12px;
font-size:12px;
font-family:STXihei;
color:rgba(102,102,102,1);
line-height:12px;
}
.sub_div .sub_line {
height: 40px;
line-height: 40px;
padding: 0px 5px;
border-bottom: 1px solid #EEEEEE;
cursor: pointer;
}
.sub_div .sub_line:hover {
background:rgba(238,238,238,1);
}
.sub_div .sub_line span {
display: inline-block;
width: 95px;
text-align: center;
height:12px;
font-size:12px;
font-family:STXihei;
color:rgba(51,51,51,1);
line-height:12px;
}
.like_history{
overflow: auto;
padding: 30px;
}
.round {
display: inline-block;
width:12px;
height:12px;
background:rgba(255,255,255,1);
border:1px solid rgba(221,221,221,1);
border-radius: 50%;
}
.like_line{
margin-top: 10px;
height: 50px;
position: relative;
}
.like_line::before {
content: '';
position: absolute;
top: 14px;
left: 7px;
height: 100%;
width: 1px;
background:rgba(221,221,221,1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
z-index: 0;
border-radius: 3px;
}
.like_line span {
margin-left: 10px;
height:14px;
font-size:14px;
font-family:STHeiti;
color:rgba(153,153,153,1);
line-height:14px;
}
.like_line p {
height:14px;
font-size:14px;
font-family:STXihei;
color:rgba(51,51,51,1);
line-height:14px;
margin-left: 24px;
margin-top: 10px;
}
.share_type{
height: 40px;
line-height: 40px;
}
.share_item span {
margin-left: 10px;
font-family:STXihei;
color:rgba(51,51,51,1);
line-height:14px;
}
.share_type .share_item {
cursor: pointer;
display:inline-block;
}
.share_item img {
max-width: 16px;
max-height: 16px;
}
.share_type > div{
display: inline-block;
width: 120px;
text-align: center;
}
.share_type .select {
border-bottom: 2px solid #54C7FC;
}
.share_code{
margin-top: 20px;
text-align: center;
}
#share_code{
margin: 0 auto;
display: table;
padding: 20px 0;
}
.share_tips{
margin-top: 20px;
width: 100%;
height:12px;
font-size:12px;
font-family:STXihei;
color:rgba(153,153,153,1);
line-height:12px;
text-align: center;
}
.operation {
display: none;
position: absolute;
width:96px;
height:auto;
background:rgba(255,255,255,1);
box-shadow:0px 4px 8px 2px rgba(0,0,0,0.1);
top: 30%;
left: 80%;
z-index: 1000;
}
.operation span {
display: inline-block;
width: 100%;
height: 40px;
line-height: 40px;
font-size:14px;
font-family:STXihei;
color:rgba(102,102,102,1);
text-align: center;
cursor: pointer;
}
.operation span:hover {
background-color: rgba(238,238,238,1);
}
.see_people{
padding: 20px;
}
.search{
position: relative;
}
.search i {
width:16px;
height:16px;
position: absolute;
right: 12px;
top: 13px;
cursor: pointer;
}
.search input {
width:300px;
height:32px;
background:rgba(255,255,255,1);
border-radius:2px;
border:1px solid rgba(221,221,221,1);
}
.sure {
width:360px;
height:50px;
padding-top: 18px;
border-top: 1px solid rgba(238,238,238,1);
}
#confirm{
text-align: center;
width:160px;
height:30px;
background:rgba(84,199,252,1);
border-radius:2px;
font-size:14px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(255,255,255,1);
line-height:30px;
margin: 0 110px;
}
.year_item {
display: inline-block;
position: relative;
border-top:1px solid rgba(204,204,204,1);
width: 60px;
}
.year_item:last-child{
border-top:0px solid rgba(204,204,204,1);
}
.year_li {
padding: 10px;
height: 60px;
float: right;
}
.year_item .y_round {
position: absolute;
top: -6px;
left: -5px;
width:9px;
height:9px;
background:rgba(255,255,255,1);
border:1px solid rgba(204,204,204,1);
border-radius: 50%;
cursor: pointer;
}
.year_item span {
position: absolute;
top: 20px;
left: -20px;
height:12px;
font-size:12px;
font-family:STXihei;
color:rgba(153,153,153,1);
line-height:12px;
cursor: pointer;
}
.action span {
color:rgba(84,199,252,1) !important;
}
.action .y_round {
width:10px;
height:10px;
background:rgba(84,199,252,1);
border:0px solid rgba(204,204,204,1) !important;
}
.label-switch input[type=checkbox] {
display: none;
}
.label-switch .checkbox {
width: 40px;
border-radius: 13px;
box-sizing: border-box;
height: 20px;
/* background: #eee; */
z-index: 0;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
border: 1px solid #ddd;
cursor: pointer;
position: relative;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.label-switch input[type=checkbox]:checked+.checkbox {
background-color: #54C7FC;
border-color: #54c7ef;
}
.label-switch .checkbox:after, .label-switch .checkbox:before {
content: ' ';
height: 18px;
/* background: #eee; */
position: absolute;
top: 0;
left: 0;
}
.label-switch input[type=checkbox]:checked+.checkbox:before {
-webkit-transform: scale(0);
transform: scale(0);
}
.label-switch .checkbox:before {
width: 40px;
border-radius: 13px;
box-sizing: border-box;
z-index: 1;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
.label-switch input[type=checkbox]:checked+.checkbox:after {
-webkit-transform: translateX(22px);
transform: translateX(22px);
top:0;
}
.label-switch .checkbox:after {
background-color: #fff;
width: 18px;
border-radius: 50%;
z-index: 2;
box-shadow:0px 3px 3px 0px rgba(0,0,0,0.05),0px 2px 2px 0px rgba(0,0,0,0.1),0px 3px 1px 0px rgba(0,0,0,0.05),0px 0px 3px 1px rgba(0,0,0,0.05);
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
.maskLayer{
width: 170px;
background:#fff;
opacity: 0.8;
position: absolute;
top:0;
left:-8px;
z-index: 666;
}
.maskLayer{
width: 177px;
background:#fff;
opacity: 0.8;
position: absolute;
top:0;
left:-8px;
z-index: 666;
}
.maskLayer.down{
position: absolute;
left: -8px;
top:-10px;
}
.configImg{
display: block;
width: 24px;
height: 26px;
position: absolute;
right:5px;
top: -5px;
}
.configImg.on{
display: none;
}
.highlight{background:green;font-weight:bold;color:white;}
#tip { background: #FFFFCC; border: 1px solid #999; width:160px; text-align: center; display:none; font-size: 12px; z-index:777; position: relative; left:0;}
</style>
<script>
/**
* 功能:点击搜索按钮,搜索文字功能
* searchInputVal : 获取输入框值
* flage : 表示如果搜索到多个,循环跳转
* regExp : 正则全局搜索
* recordTimeLineText : 父类下寻找内容
* chineseReg : 中文正则
*/
var i = 0;
var sCurText;
function highlight(){
clearSelection();//先清空一下上次高亮显示的内容;
var searchInput = $("#search_input");
var recordTimeLine = $('#record_time_line');
var timeLineLi = $('#record_time_line li');
var highLight = $('.highlight');
var searchInputVal = searchInput.val();
var flag = 0;
var _searchTop = searchInput.offset().top - 90; //输入框离顶部的位置
var _searchLeft = searchInput.offset().left - 40; //输入框向左移动的位置
if($.trim(searchInputVal)=="" || $.trim(searchInputVal)=='.'){ //输入框无内容时提示框显示内容
showTips("请输入查找内容",_searchTop,3,_searchLeft);
$('#tip').hide();
$('#record_time_line').animate({ left:0 });
return;
}
var regExp = new RegExp(searchInputVal, 'g');
var recordTimeLineText = recordTimeLine.text();
var chineseReg = /^[u4e00-u9fa5]+$/; //中文正则
var chineseRegVal = chineseReg.test(searchInputVal); //检测输入框文本
if(chineseRegVal){
showTips("请输入中文",_searchTop,3,_searchLeft);
$('#tip').hide();
$('#record_time_line').animate({ left:0 });
return;
}
if(!regExp.test(recordTimeLineText)){ //如果没有找到内容
showTips("没有找到要查找的内容",_searchTop,3,_searchLeft);
$('#tip').hide();
$('#record_time_line').animate({ left:0 });
}else{
if (sCurText != searchInputVal) { //输入框输入的值,赋值给sCurText变量
i = 0;
sCurText = searchInputVal;
}
}
timeLineLi.each(function(index){
var html = $(this).html();
var newHtml = html.replace(regExp, '<span class="highlight">'+searchInputVal+'</span>');//将找到的关键字替换,加上highlight属性;
$(this).html(newHtml); //更新;
flag = 1;
})
if(flag == 1){
if( $('.highlight').length > 1 ){
var highLight = $('.highlight');
var tipHtml = $("#tip");
var _top = highLight.eq(i).offset().top + highLight.eq(i).height(); //离文本的高度
var parentLabel = highLight.eq(i).parent().parent().parent().parent('li');
var parentPos = $('#record_time_line li').index(parentLabel);
var parentLength = $('#record_time_line li').slice(0,parentPos);
var moveLeft = 0;
parentLength.each(function(){ //获取当前li到父类ul的高度
moveLeft += $(this).width();
})
var _tip = highLight.eq(i).parent().siblings('em').text(); //tip内容赋值
if(_tip==""){ // tip提示框
_tip = highLight.eq(i).parent().siblings('.eve_desc').text();
if(_tip == ""){
_tip = highLight.eq(i).parent().siblings('.eve_title').text();
}
}
if(parentPos == 1){
tipHtml.offset({ left:196 });
}else{
tipHtml.offset({ left:0 });
}
tipHtml.html(_tip).show();
tipHtml.offset({ top: _top,});
}else{
var highLight = $('.highlight');
var tipHtml = $("#tip");
var _top = highLight.offset().top + highLight.height();
var _tip = highLight.parent().siblings('em').text();
var _left = highLight.offset().left;
if(_tip==""){ // tip提示框
_tip = highLight.parent().siblings('.eve_desc').text();
if(_tip == ""){
_tip = highLight.parent().siblings('.eve_title').text();
}
}
tipHtml.show();
tipHtml.html(_tip).offset({ top: _top, left: _left});
}
$('#record_time_line').animate({ left:-(moveLeft-160)}); // 轴移动
i++
if (i > $('.highlight').length - 1) {
i = 0;
}
}
}
/**
* 功能:清空操作
*/
function clearSelection(){ //清空操作
var timeLineLi = $('#record_time_line li');
timeLineLi.each(function(){
//找到所有highlight属性的元素;
$(this).find('.highlight').each(function(){
$(this).replaceWith($(this).html());//将他们的属性去掉;
});
});
}
/**
* 功能:搜索框提示
*/
var tipsDiv = '<div class="tipsClass"></div>';
$('.search_bar' ).append( tipsDiv );
function showTips( tips, height, time,left ){
$('.tipsClass').text(tips);
$( 'div.tipsClass' ).css({
'top' : height + 'px',
'left' :left + 'px',
'position' : 'absolute',
'padding' : '8px 6px',
'background': '#000000',
'font-size' : 14 + 'px',
'font-weight': 900,
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'border-radius':'2px',
'opacity' : '0.8' ,
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show();
setTimeout( function(){$( 'div.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
.on('keydown','#search_input',function(event){
if (event.keyCode == 13) {
highlight()
}
})
</script>