AngularJS is a JavaScript framework. It is a library written in JavaScript. It can be added to HTML pages via the tag. HTML is extended through directives and data is bound to HTML through expressions. It is published as a JavaScript file and can be added to web pages through the script tag. This article mainly introduces the sample code of angularjs to achieve timeline effect. </p> <p><strong>1 Introduce the package </strong></p> <p>Introduce the angular-timeline package. <br></p> <p>Download address: angular-timeline.zip</p> <p><strong>Introduced into index.html</strong></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"><link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/angular-timeline.js">Copy after loginQuoted in app.js, there will be no effect if not quoted. 2 Rewrite cssRewrite css according to needs, rewrite the core part. can be written in style.css, or you can create a new css file, but it must be quoted in 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; }Copy after loginThree pagesThe preparation work is completed, and the following is the preparation of the page. {{event.hour}} {{item.customerName}} {{item.reserveNumber}}人 Copy after login//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" }] } ]; } });Copy after login ##Four renderings Related tutorials: Using pure CSS3 to implement timeline switching focus map example code CSS3 implementation of timeline effect method PHP implementation of timeline function code_PHP tutorial
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
