I haven't done any project recently, so I learned angularjs knowledge in my spare time, and then wrote an example of seamless scrolling of text, mainly writing a small instruction.
css code:
Main control style
<style type="text/css">*{margin: 0px;padding: 0px;}.slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}.slide li {height: 49px;line-height: 49px;text-align: left;padding: 0 10px;font-size: 16px;list-style: none;border-bottom: 1px dashed #dcdcdc;cursor: pointer;}.slide li:hover{background: #ccc;}</style>html code:
<body ng-app="tip"><div ng-controller = "TipController"><div><ul><!-- Directive--><slide-follow id="slide" dataset-data = "datasetData"></slide-follow></ul></div></div></body>
Of course, our code is based on the angular.js file that has been introduced into the page.
slide-follow is the instruction we need to implement dataset-data = "datasetData" is the text js code we need to display
<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 in datasetData'>{{data.option}}</li>",link : function(scope,elem,attrs) {$timeout(function(){var className = $("." + $(elem).parent()[0].className);var i = 0,sh;var liLength = className.children("li").length;var liHeight = className.children("li").height() + parseInt(className.children("li").css('border-bottom-width'));className.html(className.html() + className.html());// Turn on timer sh = setInterval(slide,4000);function slide(){if (parseInt(className.css("margin-top")) > (-liLength * liHeight)) {i++;className.animate({marginTop: -liHeight * i + "px"},"slow");} else {i = 0;className.css("margin-top","0px");}}// Clear timer className.hover(function(){clearInterval(sh);},function(){clearInterval(sh);sh = setInterval(slide,4000);})},0)}}})</script>First, we define the text to be displayed in the controller, and then we can start defining the instruction section.
Running renderings:
The text will scroll seamlessly up and down. When the mouse is moved in, the timer will be cleared and the scrolling will be stopped.
The above is the angularjs code that the editor introduced to you to seamlessly scroll the text. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!