最近没有项目做，于是闲暇之余学习了下angularjs知识，然后写了一个文字上下无缝滚动的例子，主要写的是一个小小的指令。

钢性铸铁代码：

主要控制样式

样式类型=' text/CSS ' * { margin : 0px；padding: 0px }。滑动{宽度： 200像素高度：200 pxborder:1px实心# dcdcdcmargin: 0自动边距-top : 50px；飞越：隐藏；}.滑动li {高： 49px线高： 49px文本-左对齐：padd : 0 10px font-size : 16px；列表样式：无；边框-底部： 1px虚线# dcdcdccursor:指针；}.滑动李：悬停{背景： # CCC}/stylehtml代码：

body ng-app=' tip ' div ng-controller=' tip controller ' div class=' slide ' ul class=' slide ul '！-指令-幻灯片跟随id=' slide ' dataset-data=' dataset data '/幻灯片跟随/ul/div/div/body当然我们的代码都是基于页面中已经引入angular.js文件下来运行的幻灯片跟随是我们需要实现的指令数据集-数据='数据集数据'是我们需要显示的文字射流研究…代码

脚本类型=' text/JavaScript ' var app=angular。模块(' tip '，[])；app.controller('TipController '，函数($scope){//数据可以根据自己使用情况更换$ scope。数据集数据=[{ option : '这个是第一条数据}，{option : '这个是第二条数据}，{option : '这个是第三条数据}，{option : '这个是第四条数据}，{option : '这个是第五条数据}，{option : '这个是第六条数据'}]}).指令(“幻灯片跟随”，函数($ time out){返回{ restrict : ' E '，replace : true，作用域： {id : '@ '，datasetData : '='}，模板： ' Li ng-repeat=' data in dataset data ' { data }。选项} }/Li '，链接：函数(scope，elem，attrs){ $ time out(function(){ var class name=$().$(elem).parent()[0].类名)；var i=0，sh；var Lilength=类名。孩子们(李).长度；var LihAiR=类名。孩子们(李).height()ParSeint(CLaSS name。孩子们(李).css(“”边框-底部-宽度');CLaSS名称。html(CLaSS名称。html()CLaSS名称。html())；//开启定时器sh=setInterval(幻灯片，4000);函数slide(){ if(ParSeint)(类名。CSS('边距-顶部')(-liLength * lihAiR)){ I；类名。动画({ MarginTop :-LihAiR * I ' px ' }，' slow ')；} else { I=0；className.css('margin-top '，' 0px ')；}}//清除定时器类名。hover(function(){ clearInterval(sh))；}，function(){ clearInterval(sh)；sh=setInterval(幻灯片，4000);})},0)} } })/脚本首先我们在控制器中定义了需要显示的文字，接下来我们就可以开始定义指令部分。

运行效果图：

文字上下会无缝滚动，当鼠标移入是，会清除定时器，停止滚动。

以上所述是小编给大家介绍的angularjs实现文字上下无缝滚动特效代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！