jQuery实现滚动公告练习

weixin_30624825

于 2017-11-06 08:50:00 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhangzhaoyang/p/7791552.html

本文介绍了一个简单的jQuery实现的滚动公告效果。通过每隔一段时间将列表中的第一个元素移动到末尾来达到滚动的效果。此方法虽然直观但频繁操作DOM可能导致页面渲染效率降低。

jQuery实现滚动公告练习，使用appendTo()方法将第一个子项移动到最后一个，单纯练习，不提倡此做法！

滚动公告

HTML:

    <ul>
        <li>我是第1条滚动公告</li>
        <li>我是第2条滚动公告</li>
        <li>我是第3条滚动公告</li>
        <li>我是第4条滚动公告</li>
        <li>我是第5条滚动公告</li>
        <li>我是第6条滚动公告</li>
        <li>我是第7条滚动公告</li>
        <li>我是第8条滚动公告</li>
        <li>我是第9条滚动公告</li>
        <li>我是第10条滚动公告</li>
        <li>这种方式需要大量操作DOM，效率不高，不提倡</li>
    </ul>

JQ:

    setInterval(function(){
        var newLi=$("ul>:first");
        newLi.appendTo($("ul"));
        //好粗暴，看看就好~
    },2000);

转载于:https://www.cnblogs.com/zhangzhaoyang/p/7791552.html