jquery实现文字的上下滚动效果

最新推荐文章于 2026-04-01 02:53:25 发布

原创最新推荐文章于 2026-04-01 02:53:25 发布 · 1.2w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Jquery内容专栏收录该内容

21 篇文章

订阅专栏

该博客展示了如何使用jQuery创建一个文字轮流滚动的效果，每个文字在滚动后停留一段时间。通过`fadeOut`、`fadeIn`和`clone`等方法，实现了一步一停的滚动动画，并使用`setInterval`定时触发滚动函数。

效果图：

<html>
    <title>jQuery插件版文字轮流滚动，一步一停</title>
    <body>
    <script language="javascript" type="text/javascript" src="/images/jquery1.3.2.js"></script>
    <script>
    function scroll_news(){
    $(function(){
    $('#dvmq li').eq(0).fadeOut('slow',function(){
    //   alert($(this).clone().html());
    //克隆:不用克隆的话，remove()就没了。
    $(this).clone().appendTo($(this).parent()).fadeIn('slow');
    $(this).remove();
    });
    });
    }
    setInterval('scroll_news()',1000);
    </script>
    <div id="dvmq" style="width:363px; height: 32px;" >
    <ul>
    <li>1,one</li>
    <li>2,two</li>
    <li>3,three</li>
    <li>4,我走一步，停一停！</li>
    </ul>
    </div>
    </body>
    </html>