มาดูการเรนเดอร์ก่อน
อันที่จริงการเขียนภาพม้าหมุนนั้นค่อนข้างง่าย ฉันนึกถึงสองวิธีในการใช้ภาพม้าหมุน (อันที่จริงมี 5 ส่วนย่อย แต่สองนั้นมีถิ่นกำเนิดในการดำเนินการ 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> <title> </title> <style> .hidden {display: none; } .active {display: block; } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo>/div> <script type = "text/ng-template" id = "lunbo.html"> <ul> src = "{{img.src}}"/> </a> </li> </script> </body> <script> var app = angular.module ('lunbo', ['nganimate']); app.controller ('lunbocontroller', ['$ scope', 'readjson', ฟังก์ชั่น ($ scope, readjson) {}]); app.factory ('readjson', ['$ http', '$ q', ฟังก์ชั่น ($ http, $ q) {return {query: function () {var deverred = $ q.defer (); $ http ({วิธี: 'get', url: 'img.json'} }). ข้อผิดพลาด (ฟังก์ชั่น (ข้อมูล, สถานะ, ส่วนหัว, config) {deferred.reject (data);}); app.directive ('lunbo', ['readjson', ฟังก์ชั่น (readjson) {return {จำกัด : 'ea', templateurl: 'lunbo.html', ขอบเขต: {}, ลิงก์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr) scope.images = data;}); - /*App.Animation('.fade-in ', function () {return {enter: function (element, done) {}}})*/</script> </html> [{"href": "http://www.google.com", "src": "img/5.jpg", "alt": "5"}, {"href": "http://www.google.com", "src": "href": "http://www.google.com", "src": "img/8.jpg", "alt": "8"}, {"href": "http://www.google.com", "src": "img/8.jpg" "href": "http://www.google.com", "src": "img/8.jpg", "alt": "8"}, {"href": "http://www.google.com", "src": "img/9.jpg" เป็นเรื่องง่ายที่จะดูว่าคำสั่งจบลงหรือไม่ ทำได้โดยเรียกฟังก์ชั่น jQuery ที่ห่อหุ้มด้วย AngularJS โดยเรียกวัตถุ element ในฟังก์ชันลิงก์ของคำสั่ง
อีกอันคือ
ลิงค์: ฟังก์ชั่น (ขอบเขต, องค์ประกอบ, attr) {var promition = readjson.query (); var step = 0; pume.flag = false; Promise. แล้วฟังก์ชั่น (data) {console.log (data); scope.images = data;}); setInterval (function () {element.find ("li"). RemoveClass ("acitve"); step ++; step = step%5; element.find ("li"). eq (ขั้นตอน) .addclass ("active");}, 1000)}}}} หากคุณต้องการเปลี่ยนเอฟเฟกต์คุณสามารถเพิ่มแอนิเมชั่นการเปลี่ยนแปลง CSS3 ในคลาส acive
สิ่งนี้ใช้ $http และ $q เพื่อใช้การดึงข้อมูลแบบอะซิงโครนัสล่าช้า ด้วยการรวมฟังก์ชั่นด้วยวิธีนี้ฟังก์ชั่นฟังก์ชั่นสามารถแข็งแกร่งและสะดวกกว่าในการตรวจสอบฟังก์ชั่น ฉันจะใช้เวลาอธิบายเนื้อหาของ Angularjs ' $q และ $Deferred ของ Angularjs โดยเฉพาะ ในความเป็นจริงหลักการมีความคล้ายคลึงกันและทั้งคู่ดำเนินการ promise
ความยากลำบากในการใช้ JavaScript คือวิธีการเพิ่มและลดองค์ประกอบเพื่อกระตุ้นเอฟเฟกต์ภาพเคลื่อนไหวของ AngularJs ฉันเขียนหนึ่งครั้งนี้ แต่มีข้อบกพร่องเล็ก ๆ น้อย ๆ เมื่อฉันเริ่มทำงานนั่นคือขนาดขั้นตอนของปุ่มเล็ก ๆ จะต้องเพิ่มลงใน 1 เพื่อซิงโครไนซ์กับภาพถ่าย ฉันไม่รู้ว่ามันเกิดขึ้นได้อย่างไรดังนั้นฉันจะเติมเต็มในหลุมในอนาคต หากมีจุดที่ไม่เหมาะสมใด ๆ โปรดชี้ให้เห็น
มีอีกวิธีในการเขียนซึ่งฉันไม่แนะนำมาก แม้ว่ามันจะง่ายต่อการเขียน แต่ฉันจะอธิบายความคิดสั้น ๆ ซึ่งก็คือการสร้างอาร์เรย์เพื่อจัดเก็บ SRC และข้อมูลอื่น ๆ ของรูปภาพ ในแต่ละครั้งนำออกไปหนึ่งผูกมันกับ SRC ของ IMG ในสองทาง ตอนนี้อ่าน IMG และเมื่อพูดถึงเรื่องถัดไปให้ล้าง SRC ของ IMG และกำหนดอันต่อไป ด้วยการวนรอบนี้แม้ว่าจะสามารถทำม้าหมุนได้ แต่สิ่งนี้จะเพิ่มจำนวนคำขอ HTTP อย่างมาก ในกรณีที่มีความเร็วเครือข่ายต่ำประสบการณ์นั้นแย่มากและฉันไม่แนะนำ
ฉันขอแนะนำวิธีการเขียนนี้ แม้ว่าฉันจะเป็นคำอื่นเล็กน้อย แต่ฉันก็มีประสบการณ์ที่ดี
<! doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/angular.min.js" type = "text/javaScript"> </script> <title> </title> <style> *{padding: 0px; มาร์จิ้น: 0px; } div {ตำแหน่ง: ญาติ; } div ul {ตำแหน่ง: สัมบูรณ์; } div ul li {list-style-type: none; ตำแหน่ง: สัมบูรณ์; } div ul li a img {display: block; ความกว้าง: 730px; ความสูง: 454px; } div ul.listcontent {ตำแหน่ง: สัมบูรณ์; ซ้าย: 500px; ด้านบน: 410px; ความกว้าง: 200px; ความสูง: 25px; } div ul.listcontent li.list {ตำแหน่ง: ญาติ; แสดง: บล็อก; ความกว้าง: 25px; ความสูง: 25px; ลอย: ซ้าย; มาร์จิ้น: 0 5px; เส้นขอบ: 1px Solid Blue; TEXT-ALIGN: CENTER; ความสูงของสาย: 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 ()"> href = "{{img1.href}}"> <img src = "{{img1.src}}}"/> </a> </li> <li ng-switch-when = "1"> src = "{{img2.src}}"/> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.href}}"> <img src = "{{img3.href}} ng-switch-when = "3"> <a href = "{{img4.href}}"> <img src = "{{img4.src}}"/> </a> </li> src = "{{img5.src}}"/> </a> </li></ul><ul> <li ng-click = "ClickEvent (0)"> 1 </li> <li ng-click = "clickEvent (1)"> 2 </li> > 4 </li> <li ng-click = "clickEvent (4)"> 5 </li></ul> </div> </script> </body> <script> App Var = Angular.module ('Lunbo', ['nganimate']); app.controller ('lunbocontroller', ['$ scope', 'Readjson', 'MouseEvent', ฟังก์ชั่น ($ SCOPE, ReadJson, MouseEvent) {}]); app.factory ('readjson', ['$ http', '$ q', ฟังก์ชั่น ($ http, $ q) {return {query: function () {var deverred = $ q.defer (); $ http ({วิธี: 'get', url: 'img.json'} }). ข้อผิดพลาด (ฟังก์ชั่น (ข้อมูล, สถานะ, ส่วนหัว, config) {deferred.reject (data);}); /* มีปัญหาเกี่ยวกับบริการนี้และความต้องการการปรับปรุง ฉันไม่ได้คิดถึงวิธีแก้ปัญหา*/ app.factory ('MouseEvent', function () {return {MouseEvent: function (ele1, ele2, เหตุการณ์, เสร็จสิ้น) {}}}); app.directive ('lunbo', ['readjson', '$ timeout', 'MouseEvent', ฟังก์ชั่น (readjson, $ หมดเวลา, MouseEvent) {return {จำกัด : 'ea', templateurl: 'lunbo.html' สัญญาแล้ว (ฟังก์ชั่น (data) {scope.img1 = ข้อมูล [0]; scope.img2 = ข้อมูล [1]; scope.img3 = ข้อมูล [2]; scope.img4 = ข้อมูล [3]; scope.img5 = ข้อมูล [4];}); Element.find ("Li"). Eq (ขั้นตอน+1) .AddClass ("Active"); Element.find ("Li"). RemoveClass ("Active"); - app.animation ('. fade-in', function () {return {enter: function (องค์ประกอบ, เสร็จสิ้น) {var step = 0; var time = null; // ตัวจับเวลา var animationfunc = function () {step+= 20; ถ้า (ขั้นตอน> 100) {เสร็จสิ้น (); element.css ("opacity", 0); element.css ("opacity", 1);สรุป
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นความช่วยเหลือในการศึกษาและการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร