其他分享
首页 > 其他分享> > 31HUI - 滚动公告组件（hui-scroll-news）

31HUI - 滚动公告组件（hui-scroll-news）

作者：互联网

效果图

在这里插入图片描述

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>

 

标签：31HUI,scrollNews,再袭,hui,HUI,滚动,价或迎,news
来源： https://blog.51cto.com/u_15294985/3004889