资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用angularjs怎么实现一个时间轴效果

这期内容当中小编将会给大家带来有关使用angularjs怎么实现一个时间轴效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的坊子网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

在index.html中引入

app.js中引用，不引用就没有效果。

使用angularjs怎么实现一个时间轴效果

二 改写css

根据需求改写css,核心部分的改写。

可以写在style.css中，也可以新建一个css文件，但是一定要在index.html中引用。

/* 时间轴 */
.timeline-event {
 margin-bottom: 0px !important;
}

timeline-badge.infos {
 background-color: #47d09e !important;
}

.timeline:before {
 width: 1px !important;
 left: 24px !important;
 margin-top: 30px !important;
 background-color: #47d09e !important;
}

timeline-badge {
 left: 16px !important;
 width: 15px !important;
 height: 15px !important;
 top: 15px !important;
 box-shadow: none !important;
}

timeline-panel {
 float: left !important;
 width: 85% !important;
 padding: 13px 0px 6px 0px !important;
 margin-left: 39px !important;
 background: none !important;
 border: none !important;
 box-shadow: none !important;
}

timeline-panel:before {
 visibility: hidden !important;
}

timeline-panel:after {
 visibility: hidden !important;
 display: none !important;
}

timeline-panel .time {
 font-size: 14px;
 font-family: 'PingFangSC-Regular';
}

timeline-panel .detail {
 display: flex;
 display: -webkit-flex;
 align-items: center;
 -webkit-align-items: center;
 justify-content: space-between;
 -webkit-justify-content: space-between;
 margin-top: 10px;
}

timeline-panel .detail .linename {
 font-size: 16px;
 max-width: 80%;
 color: #1c1c1c;
 display: inline-block;
 font-family: 'PingFangSC-Medium';
}

timeline-panel .detail .linelevel {
 position: absolute;
 right: 18%;
 border-radius: 4px;
 color: white;
 padding: 1px 5px 1px 5px;
 font-size: 11px;
}

timeline-panel .detail .linelevel-g {
 background-color: #f27373;
}

timeline-panel .detail .linelevel-p {
 background-color: #e29431;
}

timeline-panel .detail .linenum {
 float: right;
 font-size: 14px;
 color: #323232;
}

三 页面

准备工作做完了，下面是页面的编写。



 

  
   
    
    
    
       
        {{event.hour}}
       
     
      {{item.customerName}}
      
         
         {{item.reserveNumber}}人
         
      
     
              
//controller
angular.module('studyApp.controllers')

 .controller('TimeLineCtrl', function ($scope, $rootScope, $location) {
  $scope.title = '时间轴';

  makeData();

  function makeData() {
   $scope.teamDataList=[

    {
     hour:"12:00",
     data:[
      {
       customerName:"中国国旅（江苏）国际旅行社有限公司",
       reserveNumber:"12",
       id:"aaaabbb12112"
      },
      {
       customerName:"江苏2",
       reserveNumber:"122",
       id:"aaaabbb12112"
      }
     ]
    },
    {
     hour:"13:00",
     data:[{
      customerName:"江苏2",
      reserveNumber:"112",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"14:00",
     data:[{
      customerName:"江苏3",
      reserveNumber:"12",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"13:00",
     data:[{
      customerName:"江苏2",
      reserveNumber:"112",
      id:"aaaabbb12112"
     }]

    },
    {
     hour:"14:00",
     data:[{
      customerName:"江苏3",
      reserveNumber:"12",
      id:"aaaabbb12112"
     }]

    }
   ];

  }

 });

上述就是小编为大家分享的使用angularjs怎么实现一个时间轴效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。


文章名称：使用angularjs怎么实现一个时间轴效果
文章分享：http://cdkjz.cn/article/gdhdcd.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
高端网站策划做网站价格成都印刷厂圣月阀门成都广告公司四川盐亭做网站UI设计南充网站建设成都手机网站报价四川电信机房托管

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图