应用程序通常有滚动字幕效果，如跑马灯效果所示：


代码如下：

HTML：




1。我是第一排
2。我是第二行
三.我是第三行
4。我是第四行




Css：


{。slidetopbox
宽度：100%；
Z指数：99；
位置：绝对；
顶部：0；
颜色：# 000；
}
{。shouright
宽度：100%；
Z指数：9999；
位置：绝对；
顶部：0；
身高：30px；
颜色：# 000；
溢出：隐藏；
行高：30px；
}


Js：


Angular.module（'starter。服务，{ }）
。指令（'slidescroll功能（$美元窗口，超时）{
返回{
限制：'ae，
链接：功能（范围、元素、属性）{
无功itswatch =范围。$看（
ItsWatch（）；
var i = 1；元素是UL
VaR的长度=元{ 0 }。children.length；
无功widthwindow = window.innerwidth - 20美元；
无功firstwidth =元{ 0 } { 0 }。孩子。孩子{ 0 }。offsetwidth；
setInterval（）{（）函数（
如果（i =长度）{
i = 0；初始位置
元{ 0 }。style.top =0px ；
}
无功topscorll = -（我30）；
无功widthself =元{ 0 }，{我}的孩子。孩子{ 0 }。offsetwidth； / / widthself：292
feeltotop（topscorll）
++；
}，3000）
向上滚动
功能feeltotop（topscorll）{ / / console.log（topscorll）：topscorll是最高的价值
Var Buchang = 10；
无功feeltimer = setInterval（）函数（）{
元{ 0 }。style.top = parseInt（元{ 0 }。风格。顶部）+步长+PX；
如果（parseInt（元{ 0 }。风格。顶部）< = topscorll）{
元{ 0 }。style.top = topscorll +PX；
window.clearinterval（feeltimer）；
}
}，100）；
}
}）
}
}
}）


实现效果如图所示。


上述方法是萧边在新闻跑马灯效果介绍离子的应用，希望对你有帮助，如果您有任何问题，请给我留言，萧边会及时回复你。谢谢你的支持网站。