먼저 렌더링을 살펴 보겠습니다
사실, 회전 목마 사진을 작성하는 것은 매우 간단합니다. 나는 회전 목마 그림을 구현하는 두 가지 방법을 생각했습니다 (사실, 5 개의 세분이 있지만 그 중 2 개는 DOM에 고유하고 있으며 세 가지는 AngularJS를 사용하는 애니메이션이며, 모두 두 가지 범주로 분류됩니다). 내가 그것을 쓸 때, 모든 사람은 그것을 신중하게 이해할 수 있습니다.
그런 다음 먼저 쓸 것입니다. 첫 번째는 AngularJS 애니메이션 모듈을 사용하지 않고 지침을 사용하여 애니메이션 전환을 완료하는 것입니다. 여기에서는 명령에서 DOM 요소를 작동시키는 것이며, 이는 매우 쉽습니다.
샘플 코드
<! docType html> <html lang = "en"ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js"type = "text/javascript"> </script> type = "text/javaScript"> </script> <title> </title> <tyle> .hidden {display : none; } .Active {display : 블록; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo>/div> <script type = "text/ng-template"id = "lunbo.html"> <ul> <li ng-repeat = "img in images"> <a href = "{img.href}"> src = "{{img.src}}"/> </a> </a> </li> </script> </body> <cript> var app = angular.module ( 'lunbo', [ 'nganimate']); app.controller ( 'lunbocontroller', [ '$ scope', 'readjson', function ($ scope, readjson) {}]); app.factory ( 'readjson', [ '$ http', '$ q', function ($ http, $ q) {return {query : return {query : return {query : var deferred = $ q.defer (); $ http ({method : 'get', 'img.json'}). }. app.directive ( 'lunbo', [ 'readjson', function (readjson) {return {return {extrict : 'ea', templateUrl : 'lunbo.html', scope : {}, int console.log (data); }, 1000)}}}]); /* app.animation('.fade-in ', function () {return {enter : function (element, dod) {}})*/</script> </html> [{ "href": "http://www.google.com", "src": "img/5.jpg", "alt": "5"}, { "href": "http://www.google.com", "src": "img/6.jpg", "alt": "6"} "href": "http://www.google.com", "src": "img/8.jpg", "alt": "8"}, { "href": "http://www.google.com", "src": "img/8.jpg", "alt": "<},"} "href": "http://www.google.com", "src": "img/8.jpg", "alt": "8"}, { "href": "http://www.google.com", "src": "img/9.jpg", "alt": "9"}] 지시가 끝나는 지 쉽게 알 수 있습니다. 지침의 링크 함수에서 element 객체를 호출하여 AngularJS 자체가 캡슐화 한 jQuery 함수를 호출하여 수행됩니다.
또 하나는
링크 : 함수 (범위, 요소, attr) {var promise = readjson.query (); var 단계 = 0; scope.flag = false; 약속. setInterval (function () {element.find ( "li"). RemoveClass ( "acitve"); step ++; step = step 5; emeter.find ( "li"). 전환 효과를 원한다면 acive 클래스에 CSS3 전환 애니메이션을 추가 할 수 있습니다.
이것은 $http 및 $q 사용하여 지연된 비동기 데이터 풀을 구현합니다. 이러한 방식으로 함수를 결합함으로써 함수 기능은 함수를 모니터링하는 데 더 강력하고 편리 할 수 있습니다. AngularJS의 $q 와 JQuery의 $Deferred 의 내용을 구체적으로 설명하는 데 시간을 보낼 것입니다. 실제로 원칙은 비슷하며 두 가지 모두 promise 작업을 구현합니다.
JavaScript를 구현하기가 어렵다는 것은 AngularJS의 애니메이션 효과를 유발하기 위해 요소를 늘리고 줄이는 방법입니다. 이번에는 하나를 썼지 만 실행을 시작했을 때 작은 결함이있었습니다. 즉, 작은 버튼의 단계 크기를 사진과 동기화하려면 1에 추가해야합니다. 나는 그것이 어떻게 발생했는지 모르겠으므로 앞으로 구덩이를 채울 것입니다. 부적절한 점이 있으면 지적하십시오.
글을 쓰는 또 다른 방법이 있습니다. 그다지 추천하지 않습니다. 글을 쉽게 작성하기는 쉽지만 SRC 및 기타 사진 정보를 저장하는 배열을 만드는 아이디어를 간단히 설명하겠습니다. 매번 그것을 꺼내서 양방향으로 IMG의 SRC에 바인딩하십시오. 이제 IMG를 읽고 다음에 IMG의 SRC를 지우고 다음 것을 지정하십시오. 이 루프를 사용하면 회전식을 달성 할 수 있지만 HTTP 요청 수가 크게 증가합니다. 네트워크 속도가 낮은 경우 경험이 매우 나쁘고 권장하지 않습니다.
나는이 방법을 적극 권장합니다. 나는 약간의 장점이지만 좋은 경험이 있습니다.
<! docType html> <html lang = "en"ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js"type = "text/javascript"> </script> type = "text/javaScript"> </script> <title> </title> <style> *{패딩 : 0px; 여백 : 0px; } div {위치 : 상대; } div ul {위치 : 절대; } div ul li {목록 스타일 유형 : 없음; 위치 : 절대; } div ul li a img {display : 블록; 너비 : 730px; 높이 : 454px; } div ul.listContent {위치 : 절대; 왼쪽 : 500px; 상단 : 410px; 너비 : 200px; 높이 : 25px; } div ul.listContent li.list {위치 : 상대; 디스플레이 : 블록; 너비 : 25px; 높이 : 25px; 플로트 : 왼쪽; 여백 : 0 5px; 테두리 : 1px 솔리드 블루; 텍스트 정렬 : 센터; 라인 높이 : 25px; 커서 : 포인터; } .Active {배경 : #161616; 색상 : #ffffff; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo> </div> <script type = "text/ng-template"id = "lunbo.html"> <div ng-mouseleave = "start ()"> <ul ng-switch = "pic"<li ng-switch = "0"> href = "{{img1.href}}"> <img src = "{{img1.src}}"/> </a> </a> </li> <li ng-switch when = "1"> <a href = "{img2.href}}"> <img src = "{{img2.src}}"/> </a> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.href}}"> <img src = "{img3.href}}"/> </a> </li> </li> </li> href = "{{img4.href}}"> <img src = "{{img4.src}}"/> </a> </li> <li ng-switch when = "4"> <a href = "{{img5.href}}"> <img src = "{{img5.src}}"/> </a> </a> </li> </ul> <ul> <li ng-click = "clickevent (0)"> 1 </li> <li ng-click = "clickevent (1)"> 2 </li> <li ng-click = "clickevent (2)"> 3 </li> <li> <li> <li> <li> <li> ng-click = "clickevent (3)"> 4 </li> <li ng-click = "clickevent (4)"> 5 </li> </ul> </div> </script> </body> <cript> var app = angular.module ( 'lunbo', [ 'nganimate']); app.controller ( 'lunbocontroller', [ '$ scope', 'readjson', 'mouseevent', function ($ scope, readjson, mouseevent) {}]); app.factory ( 'readjson', [ '$ http', '$ q', function ($ http, $ q) {return {query : return {query : return {query : var deferred = $ q.defer (); $ http ({method : 'get', 'img.json'}). }. /*이 서비스에는 문제가 있으며 개선이 필요합니다. 나는 아직 해결책을 생각하지 않았다*/ app.factory ( 'mouseevent', function () {return {mouseevent : function (ele1, ele2, event, done) {}}}); app.directive ( 'lunbo', [ 'readjson', '$ timeout', 'mouseevent', 'mouseevent', function (readjson, $ timeout, mouseevent) {return {extrict : 'ea', 'emplateUrl :'lunbo.html ', scope : {}, link : function (scope, element, attr) var var query (var speet =); time = null; promy.then (함수 (data) {scope.img1 = data [0]; scope.img2 = data [1]; scope.img3 = data [2]; scope.img4 = data [3]; scope.img5 = data [4];}); 요소 (li). 요소 (li "). }]); app.animation ( '. fade-in', fort () {enter {enter : function (element, done) {var step = 0; var time = null; // timer var var var animationfunc = function () {step+= 20; if (step> 100) {done (); clearinterval (time); else {element.css ( "excacity"); 요소는 "불투명도"(animationfun) {var step = 100; element.css ( "불투명도", 1);요약
위는이 기사의 전체 내용입니다. 모든 사람의 연구와 일에 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.