美文网首页
html+js实现跑马灯效果

html+js实现跑马灯效果

作者: guyunlige | 来源:发表于2020-07-16 11:30 被阅读0次

[TOC]

1, html

<div id="nav" style="height:20px;overflow:hidden;">
        <ul>
            <li style="height:20px">第一条</li>
            <li style="height:20px">第二条</li>
        </ul>
    </div>

2, js

setInterval(function() {
            $("#nav").find("ul").animate({"marginTop":"-20px"},200,function() {
                $(this).css({'marginTop':'0px'}).find("li:first").appendTo(this)
            })
        },2000)

相关文章

网友评论

      本文标题:html+js实现跑马灯效果

      本文链接:https://www.haomeiwen.com/subject/jehphktx.html