Angularjs realizes text up and down seamless scrolling special effects code-JS Tutorial-php.cn

Angularjs realizes text up and down seamless scrolling special effects code

高洛峰

Release： 2016-12-29 10:40:33

Original

1763 people have browsed it

I have no projects to do recently, so I learned some angularjs knowledge in my spare time, and then wrote an example of seamless scrolling of text up and down. It mainly wrote 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>

Copy after login

html code:

<body ng-app="tip">
<div ng-controller = "TipController">
<div class="slide">
<ul class="slideUl">
<!-- 指令 -->
<slide-follow id="slide" dataset-data = "datasetData"></slide-follow>
</ul>
</div>
</div>
</body>

Copy after login

Of course our code is based on the angular that has been introduced into the page .js file is run down
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){
// 数据可以根据自己使用情况更换
$scope.datasetData = [
{option : "这个是第一条数据"},
{option : "这个是第二条数据"},
{option : "这个是第三条数据"},
{option : "这个是第四条数据"},
{option : "这个是第五条数据"},
{option : "这个是第六条数据"}
]
})
.directive("slideFollow",function($timeout){
return {
restrict : &#39;E&#39;,
replace : true,
scope : {
id : "@",
datasetData : "="
},
template : "<li ng-repeat = &#39;data in datasetData&#39;>{{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(&#39;border-bottom-width&#39;));
className.html(className.html() + className.html());
// 开启定时器
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");
}
}
// 清除定时器
className.hover(function(){
clearInterval(sh);
},function(){
clearInterval(sh);
sh = setInterval(slide,4000);
})
},0)
}
}
})
</script>

Copy after login

First we define what needs to be displayed in the controller Text, then we can start defining the instruction part.

Running rendering:

Angularjs realizes text up and down seamless scrolling special effects code

The text will scroll up and down seamlessly. When the mouse moves in, the timer will be cleared and the scrolling will stop.

The above is the angularjs code that the editor introduces to you to achieve seamless text scrolling up and down. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will promptly Reply to everyone. I would also like to thank you all for your support of the PHP Chinese website!

For more angularjs implementation of text up and down seamless scrolling special effect code related articles, please pay attention to the PHP Chinese website!