Recently no project to do, so spare time to learn the next Angularjs knowledge, and then wrote a text up and down seamless scrolling example, mainly written is 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 class= "Slide" > <ul class= "Slideul" > <!--directive--> <slide-follow id= "slide" dataset-data = "Datasetdata" ></ slide-follow> </ul> </div> </div> </body>
Of course our code is based on the page has been introduced angular.js files down to run the
Slide-follow is we need to implement the instructions Dataset-data = "Datasetdata" is what we need to display the text JS code
<script type= "Text/javascript" > var app =angular.module ("Tip", []); App.controller ("Tipcontroller", function ($scope) {//data can be replaced according to their own use $scope. Datasetdata = [{option: "This is the first Data"}, { Option: "This is the second piece of 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"}]}. Dir
Ective ("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.childr
En ("li"). length;
var liheight = classname.children ("li"). Height () + parseint (classname.children ("Li"). css (' border-bottom-width ');
Classname.html (classname.html () + classname.html ());
Open 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 controller, and then we can begin to define the instruction section.
Run Effect chart:
Text will scroll up and down seamlessly, and when the mouse is moved, the timer will be cleared and the scroll stopped.
The above is a small set to introduce the ANGULARJS to achieve the text up and down seamless scrolling effect code, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
