Recently I have been studying angularJs. In my spare time, I casually wrote an example of seamless text scrolling up and down, mainly writing a small instruction.
Css code: mainly controls the 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">
<! -- Command -->
<Slide-follow id = "slide" dataset-data = "datasetData"> </slide-follow>
</Ul>
</Div>
</Div>
</Body>
Of course, our code is run based on the angular. js file already introduced in the page.
Slide-follow is the command we need to implement dataset-data = "datasetData" is the text we need to display
Js code
<Script type = "text/javascript">
Var app = angular. module ("tip", []);
App. controller ("TipController", function ($ scope ){
// Data can be changed based on your usage
$ Scope. datasetData = [
{Option: "This is the first data "},
{Option: "This is the second data entry "},
{Option: "This is the third piece of data "},
{Option: "This is article 4 data "},
{Option: "This is the fifth data entry "},
{Option: "This is the sixth data entry "}
]
})
. 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 ());
// Enable the 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 the 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 to define the command section.
Running effect diagram:
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
