Saya belum melakukan proyek apa pun baru -baru ini, jadi saya belajar pengetahuan AngularJS di waktu luang saya, dan kemudian menulis contoh pengguliran teks yang mulus, terutama menulis instruksi kecil.
Kode CSS:
Gaya kontrol utama
<type style = "text/css">*{margin: 0px; padding: 0px;}. Slide {width: 200px; tinggi: 200px; border: 1px solid #dcdcdc; margin: 0 auto; margin-top: 50px; overflow: tersembunyi;}. Kiri; padding: 0 10px; font-size: 16px; Daftar-gaya: Tidak ada; Border-bottom: 1px putus-putus #dcdcdc; kursor: pointer;}. Slide Li: Hover {latar belakang: #ccc;} </style>Kode HTML:
<body ng-app = "Tip"> <div ng-controller = "TipController"> <verv> <ul> <!-Directive-> <slide-ollowe id = "slide" dataSet-data = "DatasetData"> </slide-follow> </ul> </div> </div> </body>
Tentu saja, kode kami didasarkan pada file Angular.js yang telah dimasukkan ke dalam halaman.
Slide-Follow adalah instruksi yang perlu kita terapkan dataset-data = "DatasetData" adalah kode teks JS yang perlu kita tampilkan
<type script = "Text/JavaScript"> var app = angular.module ("Tip", []); app.controller ("TipController", function ($ scope) {// Data dapat diganti sesuai dengan penggunaan Anda sendiri: "ini adalah {{{{{{{{{{{{{{{{{{ini adalah data pertama. Data "}, {opsi:" Ini adalah data keempat "}, {opsi:" Ini adalah data kelima "}, {opsi:" Ini adalah data keenam "}]}). Directive (" SlideFollow owrollow ",@"@"{return {batasi: 'e', ganti: true, scope: {"@"@" ng-repeat = 'data di DatasetData'> {{data.option}} </li> ", tautan: function (scope, elem, attrs) {$ timeout (function () {var className = $ (". " className.children ("li"). Length; var lIHeight = className.children ("li"). Height () + parseInt (className.children ("li"). css ('border-bottom-width')); classname.html (classname.html () + classname = html (classname.html () + classname = classname = html (classname.html () + classname = classname = html (classname.html () + classname = classname = html (classname.html () + classname = classname = html (classname.html () + classname = classname = html (classname.html () + classname. setInterval (slide, 4000); function slide () {if (parseInt (className.css ("margin-top"))> (-lilength * liHeight)) {i ++; className.animate ({margintop: -liheight * i+"px"}, "slow"); 0; classname.css ("margin-top", "0px");}} // clear timer classname.hover (function () {clearInterval (sh);}, function () {clearInterval (sh); sh = setInterval (slide, 4000);})}, 0)}}})})})}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}},Pertama, kami mendefinisikan teks yang akan ditampilkan di pengontrol, dan kemudian kami dapat mulai mendefinisikan bagian instruksi.
Menjalankan rendering:
Teks akan menggulir dengan mulus ke atas dan ke bawah. Ketika mouse dipindahkan, timer akan dibersihkan dan pengguliran akan dihentikan.
Di atas adalah kode AngularJS yang diperkenalkan editor kepada Anda untuk menggulir teks dengan mulus. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!