دعونا نلقي نظرة على العروض أولاً
في الواقع ، فإن كتابة صورة دائرية بسيطة للغاية. فكرت في طريقتان لتنفيذ صورة دائرية (في الواقع ، هناك 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> <cript src = 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> <li ng-repeat = "img in images"> <a href = src = "{{img.src}}"/> </a> </li> </script> </body> <script> var app = Angular.module ('lunbo' ، ['nganimate']) ؛ App.Controller ('lunbocontroller' ، ['$ scope' ، 'readjson' ، function ($ scope ، readjson) {}]) ؛ app.factory ('readjson' ، ['$ http' ، '$ q' ، function ($ http ، $ q) {return {query: function () {var efferred = $ q.defer () ؛ $ http ({method: 'get' ، url: 'img.json'}). }). خطأ (البيانات ، الحالة ، config) {efferred.reject (data) ؛}) ؛ app.directive ('lunbo' ، ['readjson' ، function (readjson) {return {restrict: 'ea' ، templateurl: 'lunbo.html' ، scope: {} ، link: function (scope ، element ، attr) {var promise = readjson.query () ؛ var step = 0 ؛ console.log (Data) ؛ } ، 1000)}}}]) ؛ /* app.animation('.fade-in '، function () {return {Enter: function (element ، ext) {}}})*/</script> </html> [{"href": "http://www.google.com" ، "src": "img/5.jpg" ، "alt": "5"} ، {"href": "http://www.google.com" ، "HREF": "http://www.google.com" ، "src": "img/8.jpg" ، "alt": "8"} ، {"href": "HREF": "http://www.google.com" ، "src": "img/8.jpg" ، "alt": "8"} ، {"href": "http://www.google.com" ، "src": من السهل معرفة ما إذا كانت التعليمات تنتهي. يتم ذلك عن طريق استدعاء وظيفة jQuery مغلفة بواسطة AngularJS نفسها عن طريق استدعاء كائن element في وظيفة ارتباط التعليمات.
واحد آخر هو
الرابط: الدالة (النطاق ، العنصر ، attr) {var promise = readjson.query () ؛ var step = 0 ؛ scope.flag = false ؛ Promise.Then (دالة (البيانات) {console.log (data) ؛ scope.images = data ؛}) ؛ setInterval (function () {element.find ("li"). removeclass ("acitve") ؛ الخطوة ++ ؛ الخطوة = الخطوة ٪ 5 ؛ element.find ("li"). Eq (الخطوة). إذا كنت ترغب في انتقال التأثيرات ، فيمكنك إضافة الرسوم المتحركة الانتقالية CSS3 إلى الفصل acive .
يستخدم هذا $http و $q لتنفيذ سحب البيانات غير المتزامن المتأخر. من خلال الجمع بين الوظائف بهذه الطريقة ، يمكن أن تكون وظيفة الوظيفة أكثر قوة وأكثر ملاءمة لمراقبة الوظائف. سأقضي وقتًا على وجه التحديد في شرح محتويات AngularJS ' $q و JQuery $Deferred . في الواقع ، فإن المبادئ متشابهة وتنفيذ عمليات promise .
تكمن صعوبة تنفيذ JavaScript في كيفية زيادة وتقليل العناصر من أجل إثارة تأثير الرسوم المتحركة لـ AngularJs. كتبت واحدة هذه المرة ، ولكن كان هناك عيب صغير عندما بدأت الركض ، أي أن حجم الخطوة للزر الصغير يجب إضافة إلى 1 لمزامنة مع الصورة. لا أعرف كيف حدث ذلك ، لذلك سأملأ الحفرة في المستقبل. إذا كان هناك أي نقطة غير لائقة ، فيرجى الإشارة إليها.
هناك طريقة أخرى للكتابة ، والتي لا أوصي بها كثيرًا. على الرغم من أنه من السهل الكتابة ، إلا أنني سأشرح الفكرة بإيجاز ، وهي إنشاء صفيف لتخزين SRC وغيرها من المعلومات عن الصور. في كل مرة ، أخرج واحدة منه ، وربطها بـ SRC لـ IMG في اتجاهين. اقرأ الآن IMG ، وعندما يتعلق الأمر بالذات التالية ، قم بمسح SRC لـ IMG وتعيين واحد التالي. مع هذه الحلقة ، على الرغم من أنه يمكن تحقيق carousels ، فإن هذا يزيد إلى حد كبير من عدد طلبات HTTP. في حالة انخفاض سرعة الشبكة ، فإن التجربة سيئة للغاية ، ولا أوصي بها.
أوصي بشدة بهذه الطريقة في الكتابة. على الرغم من أنني مطوّلة قليلاً ، لدي تجربة جيدة.
<! doctype html> <html lang = "en" ng-app = "lunbo"> <head> <meta charset = "utf-8"> <script src = "lib/Angular.min.js" type = "text/javaScript"> </script> <cript src = type = "text/javaScript"> </script> <title> </title> <style> *{padding: 0px ؛ الهامش: 0px ؛ } div {الموضع: النسبي ؛ } div ul {position: absolute ؛ } div ul li {list-style-type: none ؛ الموقف: مطلق ؛ } div ul li a img {display: block ؛ العرض: 730 بكسل ؛ الارتفاع: 454px ؛ } div ul.listContent {position: absolute ؛ اليسار: 500 بكسل ؛ أعلى: 410px ؛ العرض: 200 بكسل ؛ الارتفاع: 25 بكسل ؛ } div ul.listcontent li.list {position: reconip ؛ العرض: كتلة ؛ العرض: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ تعويم: اليسار. الهامش: 0 5px ؛ الحدود: 1 بكسل الأزرق الصلب. محاذاة النص: المركز ؛ رفع الخط: 25 بكسل ؛ المؤشر: مؤشر. } .active {background: #161616 ؛ اللون: #ffffff ؛ } </style> </head> <body ng-controller = "lunbocontroller"> <div lunbo> </viv> <script type = "text/ng-template" id = "lunbo.html"> <div ng mouseleave = "start ()" <ul ng-switch = "pic"> href = "{{img1.href}}"> <img src = "{{img1.src}}"/> </a> </li> <li ng-switch-when = "1"> <a href = "{img2.href}} src = "{{img2.src}}}"/> </a> </li> <li ng-switch-when = "2"> <a href = "{{img3.href}}" href = "{{img4.href}}"> <img src = "{{img4.src}}"/> </a> </li> <li ng-switch-when = "4" src = "{{img5.src}}}"/> </a> </li></ul> <ul> <li ng click = "clickevent (0)"> 1 </li> <li ng click = "clickevent (1)"> 2 </li> <li ng-click = "clickevent (2)" ng-click = "clickevent (3)"> 4 </li> <li ng click = "clickevent (4)"> 5 </li> </ul> </viv> </script> </body> <script> 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: function () {var efferred = $ q.defer () ؛ $ http ({method: 'get' ، url: 'img.json'}). }). خطأ (البيانات ، الحالة ، config) {efferred.reject (data) ؛}) ؛ /* هناك مشكلة في هذه الخدمة وتحسين الاحتياجات. لم أفكر في حل بعد*/ app.factory ('mouseevent' ، function () {return {mouseevent: function (ele1 ، ele2 ، event ، int) {}}}) ؛ app.directive ('lunbo' ، ['readjson' ، '$ timeout' ، 'mouseevent' ، function (readjson ، $ timeout ، mouseevent) {return {restrict: 'ea' ، templateUrl: 'lunbo.html' ، scope: {} ، link: element ، elem. time = null ؛ element.find (li ". element.find (li ". }]) ؛ App.Animation ('. element.css ("العتامة" ، 0) ؛ element.css ("التعتيم" ، 1) ؛لخص
ما سبق هو المحتوى الكامل لهذه المقالة. آمل أن يكون بعض المساعدة لدراسة الجميع والعمل. إذا كان لديك أي أسئلة ، فيمكنك ترك رسالة للتواصل.