全国咨询热线:18720358503

小程序打包插件开发_js完成时间轴主动摆放效果

类别:企业动态 发布时间:2021-01-12 浏览人次:

js实现时间轴自动排列效果     作者:   本文主要介绍了js实现新增加事件:时间轴自动排列效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧

效果图:

代码如下:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title timeline /title 
 script src="jquery.min.js" /script 
 !-- script src="JavaScript/jquery-1.7.1.min.js" /script -- 
 style 
 ul,li{
 list-style: none;
 body{
 font-family: "microsoft yahei";
 .clearfix:after {
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
 clear: both;
 .cont{
 width:1000px;
 margin:0 auto;
 .biz-timeline-box{
 width:785px;
 margin: 0 auto 45px;
 /*奇数 odd*/
 .biz-timeline-box:nth-child(odd) .biz_timeline-eventbox{
 -webkit-border-radius: 0 40px 40px 0;
 -moz-border-radius: 0 40px 40px 0;
 border-radius: 0 40px 40px 0;
 float:right;
 /*偶数 even*/
 .biz-timeline-box:nth-child(even) .biz_timeline-eventbox{
 -webkit-border-radius: 40px 0 0 40px;
 -moz-border-radius: 40px 0 0 40px;
 border-radius: 40px 0 0 40px;
 float:left;
 /*奇数 odd*/
 .biz-timeline-box:nth-child(odd) .biz_timeline-event{
 -webkit-border-radius:0 30px 30px 0;
 -moz-border-radius:0 30px 30px 0;
 border-radius:0 30px 30px 0;
 /*偶数 even*/
 .biz-timeline-box:nth-child(even) .biz_timeline-event{
 -webkit-border-radius: 30px 0 0 30px;
 -moz-border-radius: 30px 0 0 30px;
 border-radius: 30px 0 0 30px;
 .biz-timeline-box:nth-child(odd) .biz_timeline-time{
 float:left;
 width:344px;
 text-align: right;
 .biz-timeline-box:nth-child(even) .biz_timeline-time{
 float:right;
 width:344px;
 text-align: left;
 .biz-timeline-box:nth-child(even) .biz_timeline-node{
 float:right;
 .biz-timeline-box:nth-child(odd) .biz_timeline-node{
 float:left;
 .biz_timeline-time{
 font-size:16px;
 color:#d81919;
 font-weight: 600;
 line-height:73px;
 .biz_timeline-eventbox{
 width: 336px;
 height: 69px;
 border: 4px solid #d94646;
 text-align: center;
 .biz_timeline-event{
 width:323px;
 height:57px;
 margin:6px;
 color:#fff;
 background:#d94646;
 text-align: center;
 font-size:16px;
 line-height:57px;
 .biz_timeline-node{
 width:8px;
 height:8px;
 border-radius: 50%;
 background: #fff;
 border:4px solid #b22b2b;
 margin:29px 40px;
 .biz_longString{
 position:absolute;
 left:50%;
 width:8px;
 height:200px;
 background:#bfbfbf;
 top:-57px;
 z-index:10;
 margin-left:-4px;
 .biz_timtline-box{
 position: relative;
 margin-top:100px;
 .biz_timeline{
 z-index:20;
 position:relative;
 .biz_title{
 text-align: center;
 margin:0 auto 35px;
 .biz_title h2{
 font-size:28px;
 color:#d81919;
 .biz_title p{
 color:#eca7a7;
 margin-top:15px;
 /style 
 /head 
 body 
 div 
 div 
 h2 发展历程 /h2 
 p CONMPANY HISTORY /p 
 /div 
 div 
 div 
 div 
 div 2012.12 /div 
 div /div 
 div 
 div 公司成立 /div 
 /div 
 /div 
 div 
 div 2013.02 /div 
 div /div 
 div 
 div 园区业务方向 /div 
 /div 
 /div 
 div 
 div 2014.03 /div 
 div /div 
 div 
 div 获天使轮投资900万元 /div 
 /div 
 /div 
 div 
 div 2013.09 /div 
 div /div 
 div 
 div 业务转型互联网营销 /div 
 /div 
 /div 
 div 
 div 2016.06 /div 
 div /div 
 div 
 div V1.0版本上线 /div 
 /div 
 /div 
 div 
 div 2017.03 /div 
 div /div 
 div 
 div 期待。。。。 /div 
 /div 
 /div 
 /div 
 div /div 
 /div 
 /div 
 script 
$(function(){
 $(".biz_longString").css('height',$(".biz-timeline-box").size()*124+57);
 /script 
 /body 
 /html 

说明:新增一个时间节点:复制 的div。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!

上一篇:网站的品牌塑造
下一篇:没有了

推荐阅读

小程序打包插件开发_js完成时间轴主动摆放效果

js完成時间轴全自动排序实际效果 创作者: 文中关键详细介绍了js完成增加加恶性事件:時间轴全自动排序实际效果的案例,具备非常好的参照使用价值。下边跟随网编一起來看看...

2021-01-12
小程序流程做软文_NodeJS基础API搭建效劳器详细过

NodeJS基本API构建网络服务器详尽全过程纪录 文中将以一个特小型web新项目,来详尽详细介绍怎样应用NodeJS基本的http, fs, path, url等控制模块出示的API来构建一个简易的web网络服务器...

2021-01-12
网站的品牌塑造

它是一个信息内容发生爆炸的时期,这类信息内容发生爆炸在互连在网上尤其突显。现如今,全世界网站总数上亿,一个网站要在信息内容万千的互连网中出类拔萃看起来特别是在关键...

2021-01-12
微信小程序源码_js完成扩大镜特效

js完成变大镜动画特效 .Zhong 本文关键为大伙儿详尽详细介绍了js完成变大镜动画特效,简易好用的编码,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下title Docume...

2021-01-12
网站怎么建设才能兼容各种平台

网站如何基本建设才可以适配各种各样服务平台 : :00 适配是检索模块优化算法的排行标准,比过去一切情况下都更为关键。假若网立在所有机器设备上面兼容问题,那麼在检索中排行...

2021-01-12
打卡小程序怎么做_vue 怎么添加全局函数或全局变

vue 怎样加上全局性涵数或全局性自变量及其宣传单页面的title设定小结 这儿设定title的方式是根据在百度搜索检索的说白了黑高新科技,防止了安卓系统和iOS的兼容问题书写var s...

2021-01-12
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信