Implementation Code of the mobile Ionic App information that is rolled up and down in a circular manner (the result of running a horse lamp), and the ionic running horse Lamp

Implementation Code of the mobile Ionic App information that is rolled up and down in a circular manner (the result of running a horse lamp), and the ionic running horse Lamp

In the ionic App, you can find out a popular name, namely, the marquee, after you have checked the online display.

Here, the selector and animation functions of the jQuery library are used, and jquery operations are encapsulated into commands. First look at the command code:

angular.module('starter')   .directive('slideScroll', function ($window, $timeout) {     return {       restrict: 'AE',       link: function (scope, element, attr) {         var _scrollHeight = 40;         var _newsLen = 3;         var index = 0;         setInterval(function () {           index += 1;           if (index > _newsLen) {             index = 0;             $(".news-right ul").css({               top: 0             })           } else {             $(".news-right ul").animate({               top: -_scrollHeight * index - 10 * index             }, 500);           }         }, 2000)       }     };   }); 

The scrollHeight of the scroll is set to 40px, with three groups of text newsLen loops, each group of two lines of text. Every 2000 ms, the ul list moves up a fixed distance, and the top value is (_ scrollHeight + 10) * The length of the index.

The Html code is as follows:

<div class="news-right" ui-sref="newsList">    <ul slide-scroll>       <li class="news-box" ng-repeat="row in dataArr">         <p ng-repeat="item in row">{{item.title.length <= 19 ? item.title : item.title.slice(0, 19) + '...'}}</p>       </li>       <li>          <p ng-repeat="item1 in dataArr[0]">{{item1.title.length <= 19 ? item1.title : item1.title.slice(0, 19) + '...'}}</p>       </li>    </ul> </div> 

The text is simply processed here. If the string exceeds 19, it will be displayed in the form.

The Css style sheet is as follows:

 .news-right {   position: absolute;   height: 40px;   left: 100px;   top: 10px;   right: 0;   color: rgb(65, 65, 65);   overflow: hidden; }  .news-right ul{   width: 100%;   position: absolute;   top: 0;   left: 0; } .news-right p {   padding: 0;   line-height: 15px;   text-overflow: ellipsis;   box-sizing: border-box;   white-space: nowrap;   font-size: 13px; } 

Summary

The above is a small Editor to introduce you to the implementation code of the mobile Ionic App information in the vertical and Vertical Circles. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!