js向上滚动消息框代码-蒲公英云

js向上滚动消息框代码

傷城~ 2022-04-13 04:14 377阅读 0赞

js向上滚动消息框代码
js向上滑动展示，实现滚动展示信息，新闻动态或者通知公告。
如下样式：

引入样式

<link rel="stylesheet" type="text/css" href="scroll.css" />

html

<h3>例1: 3秒一次</h3>
<ul class="_container" id="demo">
    <li>我是第一个出现的</li>
    <li>我是第二个出现的</li>
    <li>我是第三个出现的</li>
    <li>我是第四个出现的</li>
    <li>我要开始循环了(第五个)</li>
</ul>
<h3>例2：5秒一次</h3>
<ul class="_container" id="demo2">
    <li>例2我是第一个出现的</li>
    <li>例2我是第二个出现的</li>
    <li>例2我是第三个出现的</li>
    <li>例2我是第四个出现的</li>
    <li>例2我要开始循环了(第五个)</li>
</ul>

引入js

<script src="scroll.js" type="text/javascript" charset="utf-8"></script>

/* * demo 父容器(ul)的id * -36px 子元素li的高度 * 3000 滚动间隔时间 */
myScroll.upScroll("demo", "-36px", 3000);
myScroll.upScroll("demo2", "-36px", 5000);

scroll.js

function Scroll() { }
Scroll.prototype.upScroll = function(dom, _h, interval) { 
    var dom = document.getElementById(dom);
    var timer = setTimeout(function() { 
        var _field = dom.firstElementChild;
        _field.style.marginTop = _h;
        clearTimeout(timer);
    }, 1000)
    setInterval(function() { 
        var _field = dom.firstElementChild;
        _field.style.marginTop = "0px";
        dom.appendChild(_field);
        var _field = dom.firstElementChild
        _field.style.marginTop = _h;
    }, interval)
}
var myScroll = new Scroll();