AngularJS は JavaScript フレームワークです。 JavaScriptで書かれたライブラリです。 タグを介して HTML ページに追加できます。 HTML はディレクティブを通じて拡張され、データは式を通じて HTML にバインドされます。 これは JavaScript ファイルとして公開され、script タグを通じて Web ページに追加できます。この記事ではタイムライン効果を実現するangularjsのサンプルコードを中心に紹介します。 </p> <p><strong>1 パッケージの紹介</strong></p> <p> angular-timeline パッケージを紹介します。 <br></p> <p>ダウンロードアドレス:angular-timeline.zip</p> <p><strong>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">ログイン後にコピーapp.jsで引用されていますが、引用しないと効果はありません。 2 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; }ログイン後にコピー3つのページ準備作業が完了し、以下がページの執筆です。 {{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" }] } ]; } });ログイン後にコピー 4つのレンダリング 関連チュートリアル: 純粋なCSS3を使用してタイムライン切り替えを実装するフォーカスマップサンプルコード CSS3実装時間軸エフェクトメソッド タイムライン関数コードのPHP実装_PHPチュートリアル
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
