Я не сделал никакого проекта в последнее время, поэтому я узнал знания Angularjs в свободное время, а затем написал пример бесшовной прокрутки текста, в основном написав небольшую инструкцию.
CSS -код:
Основной стиль управления
<Style Type = "text/css">*{Margin: 0px; Padding: 0px;}. Slide {width: 200px; высота: 200px; граница: 1px solid #dcdcdc; Margin: 0 Auto; Margin-top: 50px; переполнен: hidden;}. Слева; накладка: 0 10px; размер font: 16px; list-style: none; border-bottom: 1px пунктир #dcdcdc; coursor: pointer;}. Slide li: Hover {fanost: #ccc;} </style>HTML -код:
<body ng-app = "tip"> <div ng-controller = "tipcontroller"> <div> <ul> <!-Директива-> <slide-follow id = "Slide" DataSet-data = "DataSetData"> </slide-follow> </ul> </div> </div> </body>
Конечно, наш код основан на файле angular.js, который был введен на страницу.
Slide-Pollow-это инструкция, которую нам нужно реализовать наборы данных data = "dataSetData"-это код текста JS, который нам нужно отобразить
<script type = "text/javascript"> var app = angular.module ("tip", []); app.controller ("tipcontroller", function ($ scope) {// Данные могут быть заменены в соответствии с вашим собственным использованием $ scope.datasetdata = [{{antain: "Это первые данные"}, {aptorive: "Это есть" это есть "это есть". Data «}, {опция:« Это четвертый данных »}, {опция:« Это пятая данные »}, {опция:« Это шестая данные »}]}). Директива (" slidefollow ", function ($ timeout) {return {Rentrict: 'e', reply: racope: {id:"@", dataSetAta:" = "? ng-repeat = 'data in dataSetData'> {{data.option}} </li> ", ссылка: функция (Scope, elem, attrs) {$ timeout (function () {var classname = $ (". " + $ (elem) .parent () [0] .classname); classname.children ("li"). Length; var liheight = classname.children ("li"). Height () + parseint (classname.children ("li"). css ('border-bottomwidth'); classname.html (classname.html () + classname.html ();///////// c setInterval (slide, 4000); function slide () {if (parseint (classname.css ("margin-top"))> (-lilength * liheight)) {i ++; classname.animate ({margintop: -liheight * i+"px"}, "медленное"); 0; classname.css ("margin-top", "0px");}} // clear timer classname.hover (function () {clearInterval (sh);}, function () {clearInterval (sh); sh = setInterval (slide, 4000);})}, 0)}}}) <//script> script>) <//script> <//script> <//script> <//script>)Сначала мы определяем текст, который будет отображаться в контроллере, и затем мы можем начать определять раздел инструкции.
Заводные визуализации:
Текст будет плавно прокручивать вверх и вниз. Когда мышь будет перемещена, таймер будет очищен, а прокрутка будет остановлен.
Выше приведено код AngularJS, который редактор представил вам, чтобы беспрепятственно прокрутить текст. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!