No he realizado ningún proyecto recientemente, así que aprendí conocimiento de AngularJS en mi tiempo libre y luego escribí un ejemplo de desplazamiento sin problemas de texto, principalmente escribiendo una pequeña instrucción.
Código CSS:
Estilo de control principal
<style type = "text/css">*{margin: 0px; relled: 0px;}. Slide {ancho: 200px; altura: 200px; border: 1px sólido #dcdcdc; margin: 0 auto; margin-top: 50px; Overflow: ocultden;}. Slide Slide: 49px; línea; hundimiento: 49px; izquierda; relleno: 0 10px; font-size: 16px; list-style: Ninguno; Border-Bottom: 1px Dable #DCDCDC; Cursor: Pointer;}. Slide Li: Hover {fondo: #ccc;} </style>Código HTML:
<cuerpo ng-app = "tip"> <div ng-controller = "tipController"> <div> <ul> <!-Directiva-> <slide-follow id = "slide" dataSet-data = "DataSetData"> </lide-follow> </ul> </div> </div> </body>
Por supuesto, nuestro código se basa en el archivo Angular.js que se ha introducido en la página.
Slide-Follow es la instrucción que necesitamos para implementar DataSet-Data = "DataSetData" es el código de texto JS que necesitamos mostrar
<script type="text/javascript">var app =angular.module("tip",[]);app.controller("TipController",function($scope){// Data can be replaced according to your own usage $scope.datasetData = [{option : "This is the first data"},{option : "This is the second data"},{option : "This is the third data"},{option : "This is the fourth data"},{option : "This is the fifth data"},{option : "This is the sixth data"}]}).directive("slideFollow",function($timeout){return {restrict : 'E',replace : true,scope : {id : "@",datasetData : "="},template : "<li ng-repeat = 'data en DataSetData'> {{data.option}} </li> ", link: function (scope, elem, attrs) {$ timeOut (function () {var className = $ (". " + $ (Elem) .Parent () [0]. liHeight = classname.children ("li"). Height () + parseInt (classname.children ("li"). CSS ('border-bottom-width')); classname.html (classname.html () + classNe.html ()); // Timer sh = setinterval (slide, 4000); (parseInt (classname.css ("margin-top"))> (-lilength * liheight)) {i ++; classname.animate ({margintop: -liheight * i+"px"}, "lento");} else {i = 0; classname.css ("margen-top", "0px");} classname.Hover (function () {clearInterval (sh);}, function () {clearInterval (sh); sh = setInterval (slide, 4000);})}, 0)}}}) </script>Primero, definimos el texto que se mostrará en el controlador, y luego podemos comenzar a definir la sección de instrucciones.
Renderizaciones de ejecución:
El texto se desplazará sin problemas hacia arriba y hacia abajo. Cuando se mueva el mouse, se borrará el temporizador y se detendrá el desplazamiento.
Lo anterior es el código AngularJS que el editor le presentó para desplazar sin problemas el texto. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!