模仿网页ctrl+F搜索功能

最新推荐文章于 2023-07-14 17:32:01 发布

码世界

最新推荐文章于 2023-07-14 17:32:01 发布

阅读量1.3k

点赞数 1

分类专栏：前端知识

本文链接：https://blog.csdn.net/qq_30607437/article/details/88078459

版权

前端知识专栏收录该内容

31 篇文章 1 订阅

订阅专栏

模信插件：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>

码世界

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模仿网页ctrl+F搜索功能

模信插件：https://www.helloweba.net/javascript/246.html https://www.helloweba.net/demo/findcontent/&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF...
复制链接

扫一扫

专栏目录