나는 최근에 어떤 프로젝트도하지 않았으므로 여가 시간에 AngularJS 지식을 배운 다음 주로 작은 지시를 작성하는 텍스트의 원활한 스크롤의 예를 썼습니다.
CSS 코드 :
메인 제어 스타일
<스타일 유형 = "text/css">*{마진 : 0px; 패딩 : 0px;}. 슬라이드 {너비 : 200px; 높이 : 200px; 경계 : 1px solid #dcdcdc; margin : 0 auto; margin-top : 50px; 오버 플로 : 숨겨진;}. 왼쪽; 패딩 : 0 10px; font-size : 16px; 목록 스타일 : None; Border-Bottom : 1px Dashed #dcdcdc; cursor : pointer;}. 슬라이드 Li : Hover {background : #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-Follow는 DataSet-Data = "DataSetData"를 구현하는 데 필요한 지침입니다.
<script type = "text/javaScript"> var app = angular.Module ( "tip", []); app.controller ( "tipcontroller", function ($ scope) {// 데이터를 자신의 사용에 따라 대체 할 수 있습니다. $ scope.datasetdata = [옵션 : "옵션 :"옵션 : "이것은 두 번째 데이터입니다. 데이터 "}, {옵션 :"이것은 네 번째 데이터입니다 "}, {옵션 :"이것은 5 번째 데이터입니다 "}, {옵션 :"이것은 여섯 번째 데이터입니다 "}}). directive ("slidefollow ", function ($ timeout) {return {restrict : 'e', replare : {implate :", dataSetddata : ", dataSetDdata :", dataSetDdata : "} ng-repeat = 'dataSetData의 데이터'> {{data.option}} </li> ", 링크 : 함수 (scope, elem, attrs) {$ timeout (function () {var className = $ (". " + $ (elem). liheight = classname.children ( "li"). height () + parseint (classname.children ( "li"). css ( 'border-bottom-width')); classname.html () + classname.html ()); // setinterval (slide, 4000); (parseint (classname.css ( "margin-top"))> (-lilegrength * liheight)) {i ++; classname.animate ({margintop : -liheight * i+"px"}, "slow");} else {i = 0; classname.css ( "margin-top", "0px"; className.Hover (function () {clearInterVal (sh);}, function () {clearInterval (sh); sh = setInterval (slide, 4000);})}, 0)}}) </script>먼저 컨트롤러에 표시 할 텍스트를 정의 한 다음 명령어 섹션을 정의 할 수 있습니다.
실행 렌더링 :
텍스트는 원활하게 위아래로 스크롤됩니다. 마우스가 들어가면 타이머가 지워지고 스크롤이 중지됩니다.
위는 텍스트를 원활하게 스크롤하기 위해 편집기가 소개 한 AngularJS 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!