效果图
dom 结构
<div class="hui-scroll-news">
<div class="hui-scroll-news-items">滚动项目</div>
<div class="hui-scroll-news-items">滚动项目.....</div>
</div>
使用 hui.scrollNews(domId) 开启滚动动画
参数：外层 dom id
演示代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
<div id="hui-back"></div>
<h1>HUI 滚动公告</h1>
</header>
<div class="hui-wrap">
<div class="hui-common-title" style="margin-top:25px;">
<div class="hui-common-title-line"></div>
<div class="hui-common-title-txt">单行公告</div>
<div class="hui-common-title-line"></div>
</div>
<div style="background:#FFF; padding:0px 15px; margin:10px;" class="hui-flex">
<div style="height:46px; width:20px;">
<img src="../img/spiker.png" width="20" style="padding:13px 0px;" />
</div>
<div class="hui-scroll-news" id="scrollnew1">
<div class="hui-scroll-news-items"><a href="javascript:hui.toast('test...');">一块橘子皮就能秒开你的手机</a></div>
<div class="hui-scroll-news-items">新一轮成品油价或迎年内首次"二连涨"</div>
<div class="hui-scroll-news-items">暴雪再袭长三角：交通遭重创 用电量增 菜价涨</div>
</div>
</div>
<div class="hui-common-title" style="margin-top:30px;">
<div class="hui-common-title-line"></div>
<div class="hui-common-title-txt">多行公告</div>
<div class="hui-common-title-line"></div>
</div>
<div style="background:#FFF; margin:10px;" class="hui-flex">
<div style="height:56px; margin:10px;">
<img src="../img/scrollNews.png" width="56" />
</div>
<div class="hui-scroll-news" id="scrollnew2" style="height:56px;">
<div class="hui-scroll-news-items"><a href="javascript:hui.toast('test...');">一块橘子皮就能秒开你的手机</a></div>
<div class="hui-scroll-news-items">新一轮成品油价或迎年内首次"二连涨"</div>
<div class="hui-scroll-news-items">暴雪再袭长三角：交通遭重创 用电量增 菜价涨</div>
</div>
</div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
hui.scrollNews(scrollnew1);
hui.scrollNews(scrollnew2, 8000);
</script>
</body>
</html>