Je n'ai fait aucun projet récemment, j'ai donc appris les connaissances angularjs pendant mon temps libre, puis j'ai écrit un exemple de défilement transparent du texte, écrivant principalement une petite instruction.
Code CSS:
Style de contrôle principal
<style type = "Text / CSS"> * {marge: 0px; padding: 0px;}. Slide {largeur: 200px; hauteur: 200px; bordure: 1px solide #dcdcdc; margin: 0 auto; margin-top: 50px; overflow: caché;}. gauche; padding: 0 10px; police-taille: 16px; style list: Aucun; border-bottom: 1px en pointillé #dcdcdc; curseur: pointeur;}. Slide li: hover {background: #ccc;} </ style>Code html:
<body ng-app = "Tip"> <div ng-contrôleur = "TipController"> <div> <ul> <! - Directive -> <Slide-Fally id = "Slide" DataSet-data = "DataSetData"> </diquate-suive> </ul> </ div> </div> </ body>
Bien sûr, notre code est basé sur le fichier angular.js qui a été introduit dans la page.
Slide-suive est l'instruction dont nous avons besoin pour implémenter DataSet-data = "DataSetData" est le code JS texte que nous devons afficher
<script type = "text / javascript"> var app = angular.module ("Tip", []); app.Controller ("TipController", fonction ($ scope) {// Données peuvent être remplacées en fonction de votre propre utilisation $ scope.dataSetData = [{Option: "Il s'agit de la première données"}, {Option: "Il s'agit de la deuxième données". Données "}, {Option:" Il s'agit de la quatrième données "}, {Option:" Ceci est la cinquième données "}, {Option:" Ceci est la sixième données "}]}). Directive (" SlideFollow ", Fonction ($ Timeout) {return {restrict: 'e', remplacer: True, Scope: {id:" @ ", datasetdata:" = "," ng-repeat = 'data dans dataSetData'> {{data.option}} </li> ", link: function (scope, elem, attrs) {$ timeout (function () {var className = $ (". "+ $ (elem) .parent () [0] .classname); var i = 0, sh; var lilngth = ClassName.children ("li"). Longueur; var liheight = classname.children ("li"). height () + parseInt (className.children ("li"). css ('border-bottom-width')); classname.html (classname.html () + classname.html ()); // Tirl setInterval (Slide, 4000); fonction Slide () {if (parseInt (className.css ("margin-top"))> (-Lilngth * liheight)) {i ++; className.animate ({margintop: -liheight * i + "px"}, "lent");} else {i = 0; className.css ("margin-top", "0px");}} // timiner claire classname.hover (function () {clearInterval (sh);}, function () {ClearInterval (sh); sh = setInterval (Slide, 4000);})}, 0)}}}) </ / script>Tout d'abord, nous définissons le texte à afficher dans le contrôleur, puis nous pouvons commencer à définir la section d'instructions.
Renforts de course:
Le texte fait défiler de manière transparente de haut en bas. Lorsque la souris est déplacée, la minuterie sera effacée et le défilement sera arrêté.
Ce qui précède est le code angularjs que l'éditeur vous a présenté pour faire défiler le texte de manière transparente. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!