ฉันไม่ได้ทำโครงการใด ๆ เมื่อเร็ว ๆ นี้ดังนั้นฉันจึงเรียนรู้ความรู้ AngularJS ในเวลาว่างจากนั้นเขียนตัวอย่างของการเลื่อนข้อความอย่างราบรื่นโดยส่วนใหญ่เขียนคำแนะนำเล็ก ๆ
รหัส CSS:
สไตล์การควบคุมหลัก
<style type = "text/css">*{margin: 0px; padding: 0px;}. slide {width: 200px; ความสูง: 200px; เส้นขอบ: 1px ของแข็ง #dcdcdc; margin: 0 auto; ซ้าย; การตอบสนอง: 0 10px; font-size: 16px; list-style: none; border-bottom: 1px dashed #dcdcdc; เคอร์เซอร์: pointer;}. slide 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>
แน่นอนรหัสของเราขึ้นอยู่กับไฟล์ Angular.js ที่ได้รับการแนะนำในหน้า
Slide-Follow เป็นคำสั่งที่เราจำเป็นต้องใช้ DataSet-Data = "DataSetData" คือรหัสข้อความ JS ที่เราต้องแสดง
<script type = "text/javascript"> var app = angular.module ("tip", []); app.controller ("tipcontroller", ฟังก์ชั่น ($ scope) {// ข้อมูลสามารถแทนที่ได้ตามตัวเลือกที่สอง: ตัวเลือกนี้ " data "}, {ตัวเลือก:" นี่คือข้อมูลที่สี่ "}, {ตัวเลือก:" นี่คือข้อมูลที่ห้า "}, {ตัวเลือก:" นี่คือข้อมูลที่หก "}]}). Directive (" slidefollow ", ฟังก์ชั่น ng-repeat = 'data ใน dataSetData'> {{data.option}} </li> ", ลิงก์: ฟังก์ชัน (ขอบเขต, elem, attrs) {$ timeout (ฟังก์ชั่น () {var classname = $ (". " + $ (elem). liheight = classname.children ("li"). ความสูง () + parseint (classname.children ("li"). css ('ความกว้างของขอบด้านล่าง')); classname.html (classname.html () (parseint (classname.css ("margin-top"))> (-lilength * liheight)) {i ++; classname.animate ({margintop: -liheight * i+"px"}, "slow"); classname.hover (function () {clearinterval (sh);}, function () {clearinterval (sh); sh = setInterval (สไลด์, 4000);})}, 0)}}}) </script>ก่อนอื่นเรากำหนดข้อความที่จะแสดงในคอนโทรลเลอร์จากนั้นเราสามารถเริ่มกำหนดส่วนคำสั่ง
รันเรนเดอร์:
ข้อความจะเลื่อนขึ้นและลงอย่างราบรื่น เมื่อเมาส์ถูกเลื่อนเข้ามาตัวจับเวลาจะถูกล้างและการเลื่อนจะหยุดลง
ด้านบนเป็นรหัส AngularJS ที่ตัวแก้ไขแนะนำให้คุณเลื่อนข้อความอย่างราบรื่น ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!