لم أقم بأي مشروع مؤخرًا ، لذلك تعلمت معرفة AngularJS في أوقات فراغي ، ثم كتبت مثالًا على التمرير السلس للنص ، وكتابة تعليمات صغيرة بشكل أساسي.
رمز CSS:
نمط التحكم الرئيسي
<style type = "text/css">*{margin: 0px ؛ padding: 0px ؛}. الشريحة {width: 200px ؛ الارتفاع: 200px ؛ الحدود: 1px صلبة #dcdcdc اليسار ؛ حشوة: 0 10px ؛ الحجم font: 16px ؛ أسلوب القائمة: لا شيء ؛ bordbotom: 1px متقطع #DCDCDC ؛ المؤسس: مؤشر ؛}.رمز HTML:
<body ng-app = "tip"> <div ng-controller = "tipcontroller"> <viv> <ul> <!-التوجيه-> <slide-follow id = "slide" dataset-data = "datasetdata"> </slide-follow> </ul> </div> </body>
بالطبع ، يعتمد الكود الخاص بنا على ملف Angular.js الذي تم إدخاله في الصفحة.
تتبع الشرائح هو التعليمات التي نحتاجها إلى تنفيذ مجموعة البيانات = "datasetdata" هو رمز JS الذي نحتاج إلى عرضه
<script type = "text/javaScript"> var app = Angular.Module ("tip" ، []) ؛ app.controller ("tipcontroller" ، function ($ scope) {// data يمكن استبدال البيانات الخاصة بك وفقًا لاستخدامك $ $. البيانات "} ، {الخيار:" هذه هي البيانات الرابعة "} ، {الخيار:" هذه هي البيانات الخامسة "} ، {الخيار:" هذه هي البيانات السادسة "}]}). التوجيه (" slidefollow "، function ($ timeout) ng-repeat = 'data in dataSetData'> {{data.option}}} </li> "، الرابط: الدالة (النطاق ، elem ، attrs) {$ timeout (function () {var className = $ (". liheight = classname.children ("li"). الارتفاع () + parseint (classname.children ("li"). (parseint (classname.css ("margin-top"))> (-liLength * liheight)) {i ++ ؛ classname.animate ({margintop: -liheight * i+"px"} ، "slow") ؛} {i = 0 ؛ classname.hover (function () {clearinterval (sh) ؛} ، function () {clearinterval (sh) ؛ sh = setInterval (slide ، 4000) ؛})} ، 0)}}}) </script>أولاً ، نحدد النص الذي سيتم عرضه في وحدة التحكم ، ثم يمكننا البدء في تحديد قسم التعليمات.
الجري الاداءات:
سيتم تمرير النص بسلاسة صعودا وهبوطا. عند نقل الماوس ، سيتم مسح المؤقت وسيتم إيقاف التمرير.
ما سبق هو رمز AngularJS الذي قدمه لك المحرر لتمرير النص بسلاسة. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!