移入时间出现弹框的时间线

菁菁589

已于 2022-12-16 16:30:16 修改

阅读量90

点赞数

文章标签： html css 前端

于 2022-12-16 14:00:01 首次发布

本文链接：https://blog.csdn.net/weixin_63572203/article/details/128341975

版权

第一步：dom

</div>

</div>

<ul>

<li><span></span>被中国通信企业协会授予优秀“企业创新先锋”荣誉</li>

<li><span></span>被中国国际信息通信展览会组委会授予“最受欢迎品牌奖”</li>

<li><span></span>在第十一届公益节上被授予“公益践行奖”</li>

<li><span></span>荣获“百度营销技术服务商”荣誉称号</li>

</ul>

</div>

</li>

</div>

<ul>

<li><span></span>荣获2020ICT行业趋势年会“增值业务最佳技术创新奖”</li>

<li><span></span>荣获“2018-2109年度通信网络运营维护服务用户满意企业”称号</li>

<li><span></span>成功入围获“北京市用户满意企业”称号</li>

<li><span></span>参加2020年中国国际信息通信展览会，先后获得2020年度“技术<br>

创新应用奖”、“最受欢迎品牌奖”、2020年“优秀雇主”等三<br>

项大奖

</li>

</ul>

</div>

</li>

</div>

<ul>

<li><span></span>获得中国通信企业协会颁发的“2018-2019年度通信网络维护服务<br>

支撑先进单位”殊荣

</li>

<li><span></span>喜获欧美同学会(中国留学人员联谊会)、全球化智库（CCG）共同<br>

授予中国“留学生实习研究基地”

</li>

<li><span></span>喜获CTI论坛2019年度编辑推荐奖“在线客服系统”、“最佳技术<br>

奖”两项大奖

</li>

</ul>

</div>

</li>

</div>

<ul>

<li><span></span>正式成为中国通信企业协会会员</li>

<li><span></span>参加2018年中国国家通信展，在ICT中国创新成果评选中脱颖而出，<br>

特别荣获“行业解决方案优秀奖”</li>

<li><span></span>参加第十二届中国通信产业榜，被授予“中国通信设备技术服务提<br>

供商100强”并获得“云通信服务领军企业”、“企业专属通信解<br>

决方案”奖</li>

<li><span></span>参加2018年中国通信网络运营维护服务年会，荣获“2017-2018年<br>

度通信网络运营维护服务用户满意企业”奖</li>

<li><span></span>受邀出席“2018中国县域产业互联网发展大会”，被授予“特色产<br>

业互联网县域合作服务商”称号</li>

</ul>

</div>

</li>

</div>

<ul>

<li><span></span>获得北京市《高新技术企业证书》</li>

<li><span></span>被58同城授予“消费者信赖商家”</li>

<li><span></span>被北京电信授予“SaaS应用合作伙伴证书”</li>

<li><span></span>荣获“百度营销技术服务商”荣誉称号</li>

<li><span></span>参加2017年中国国际信息通信展，被授予“中国通信设备技术服务<br>

提供商100强”，荣获“市场竞争力奖”、“最具竞争力方案奖”</li>

<li><span></span>荣获CTI论坛编辑推荐奖——“统一通信与协作产品”奖项<br>

获得“2017年度ICT行业影响力企业奖”和“2017年度最佳平台创<br>

新奖”两项大奖</li>

</ul>

</div>

</li>

</div>

<ul>

<li><span></span>获得《中华人民共和国增值电信业务经营许可证》</li>

<li><span></span>荣获360“卓越贡献合作伙伴</li>

</ul>

</div>

</li>

</ul>

</div>

第二步css

.one-fwe .timeline {

margin:0 auto;

font-size:14px;

list-style:none;

margin-left: 100px;

margin-bottom: 176px;

}

.one-fwe .timeline-item {

position:relative;

padding-bottom:34px;

}

.one-fwe .timeline-item .node{

display: inline-block;

height: 30px;

width: 30px;

}

.one-fwe .timeline-item__tail {

position:absolute;

left:10px;

/* height:100%;

border-left:3px solid #4B42D3;

top:23px;

bottom:0;

margin: 6px 0px;

}

.one-fwe .timeline-item__content {

width: 1000px;

font-size: 20px;

font-family: SourceHanSansCN-Regular, SourceHanSansCN;

font-weight: 400;

color: #585A60;

line-height: 26px;

text-align: left;

box-shadow: 0px 4px 19px 0px rgba(163,163,163,0.5);

border-radius: 0px 25px 25px 25px;

display: flex;

align-content: center;

padding: 40px 0;

margin-top: 20px;

}

.one-fwe .timeline-item__timestamp.is-bottom {

margin: 0px 78px 0px 38px;

display:flex;

align-items:center;

height: 17px;

font-size: 17px;

font-family: SourceHanSansCN-Regular, SourceHanSansCN;

font-weight: 400;

color: #5B5B5B;

line-height: 26px;

padding-top: 20px;

}

.one-fwe .timeline-item__timestamp {

color:#909399;

line-height:1;

font-size:13px;

}

.one-fwe .timeline-item__wrapper {

position:relative;

padding-left:22px;

top:-29px;

left: 53px;

}

.one-fwe .timeline-item .node {

border:#796BFF 1px solid;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

width: 25px;

height: 25px;

}

.one-fwe .xuanzhong{

width:15px;

height:15px;

background-color:#796BFF;

border-radius:50%;

}

.one-fwe .timeline-item__wrapper {

display:flex;

}

.one-fwe .timeline .neirong ul li span{

display: inline-block;

width: 6px;

height: 6px;

background: #6156F9;

border-radius: 50%;

position: relative;

top: -6px;

margin-right: 7px;

}

.one-fwe .timeline .neirong ul li{

line-height: 39px;

}

.one-fwe .timeline .neirong ul{

position: relative;

left: 20px;

}

第三步：jquery

$('.timeline .timeline-item').hover(function(){

var $this = $(this).index();

//给timeline-item__wrapper标签添加选中的样式

$(this).find('div:eq(3)').addClass("timeline-item__content");

$(this).siblings().find('div:eq(3)').removeClass("timeline-item__content");

//给timeline-item__wrapper里面的三角形添加是否显示

$(this).find('div:eq(3) img').css({'display':'block'});

$(this).siblings().find('div:eq(3) img').css({'display':'none'});;

//添加圆形里选中的样式

$(this).find('div:eq(1)').children().addClass("xuanzhong");

$(this).siblings().find('div:eq(1)').children().removeClass("xuanzhong");

//添加文本内容的显示和隐藏

$(this).find('div:eq(5)').css({'display':'block'});

$(this).siblings().find('div:eq(5)').css({'display':'none'});

//添加年份的选中样式和未选中的样式

$(this).find('div:eq(4)').css({'color':'#6156F9','font-size':'20px','font-weight':'600'});

$(this).siblings().find('div:eq(4)').css({'color':'#5B5B5B','font-size':'17px','font-weight':'500'});

})

菁菁589

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移入时间出现弹框的时间线

时间线
复制链接

扫一扫

移入时间出现弹框的时间线

“相关推荐”对你有帮助么？