Ich habe in letzter Zeit kein Projekt durchgeführt, also habe ich in meiner Freizeit AngularJS -Wissen gelernt und dann ein Beispiel für nahtloses Scrollen von Text geschrieben, wobei hauptsächlich eine kleine Anweisung geschrieben wurde.
CSS -Code:
Hauptkontrollstil
<style type = "text/css">*{margin: 0px; padding: 0px;}. Slide {width: 200px; Höhe: 200px; Border: 1px solid #dcdcdc; Margin: 0 auto; Margin-Top: 50px; Überlauf: Hidden;}. Slide li {Höhe: 49px; Links; Padding: 0 10px; Schriftgröße: 16px; Listenstil: Keine; Border-Bottom: 1PX gestrichelt #dcdcdc; Cursor: Zeiger;}. Slide Li: Hover {Hintergrund: #ccc;} </style> </style> </style> </style>HTML -Code:
<body ng-App = "TIP"> <div ng-controller = "TipController"> <div> <ul> <!-Anweisung-> <Slide-Flow id = "Slide" dataset-data = "dataSetData"> </dia-follow> </ul> </div> </div> </body> </body> </body> </body>
Natürlich basiert unser Code auf der Angular.js -Datei, die in die Seite eingeführt wurde.
Die Folien-Follow ist die Anweisung, die wir für die Implementierung von Dataset-data = "DataSetData" implementieren müssen, ist der Text-JS-Code, den wir anzeigen müssen
<script type="text/javascript">var app =angular.module("tip",[]);app.controller("TipController",function($scope){// Data can be replaced according to your own usage $scope.datasetData = [{option : "This is the first data"},{option : "This is the second data"},{option : "This is the third data"},{option : "This is the fourth data"},{option : "This is the fifth data"},{option : "This is the sixth data"}]}).directive("slideFollow",function($timeout){return {restrict : 'E',replace : true,scope : {id : "@",datasetData : "="},template : "<li ng-repeat = 'Daten in DataSetData'> {{data.option}} </li> ", link: function (scope, elem, attrs) {$ timeout (function () {var className = $ (". liHeight = className.Children ("li"). height () + parseInt (className.children ("li"). CSS ('Border-Bottom-Width'); . className.hover (function () {clearInterval (sh);}, function () {clearInterval (sh); sh = setInterval (Folie, 4000);})}, 0)}}}) </script>Zuerst definieren wir den im Controller angezeigten Text und dann können wir den Anweisungsabschnitt definieren.
Rennrenderungen:
Der Text wird nahtlos nach oben und unten scrollen. Wenn die Maus eingezogen wird, wird der Timer gelöscht und das Scrollen wird gestoppt.
Das obige ist der AngularJS -Code, den der Editor Ihnen vorgestellt hat, um den Text nahtlos zu scrollen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!