使用jquery实现文字滚动，鼠标悬停效果

guorui_cara

于 2017-10-26 16:39:11 发布

阅读量2.8k

点赞数

分类专栏： jquery 文章标签： jquery 文字无间隙滚动 animate setInterva

本文链接：https://blog.youkuaiyun.com/guorui_cara/article/details/78355630

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客为前端初学者提供了一个简单的实例，演示如何使用jQuery创建文字无缝滚动的效果，并在鼠标悬停时暂停，鼠标移开后继续滚动。内容包括HTML代码、CSS样式和JavaScript行为的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这就是个简单的小栗子，希望可以帮助前端初学者。
效果：文字无缝滚动，鼠标悬停则停止，鼠标移开则重新滚动。
1、html代码：

<div class="scroll">
    <ul class="list-unstyled">
        <li>苹果</li>
        <li>橘子</li>
        <li>香蕉</li>
        <li>菠萝</li>
        <li>芒果</li>
        <li>黄桃</li>
    </ul>
</div>

2、css样式：

.scroll{
    position: relative;
    left: 20%;
    top: 200px;
    display: inline-block;
    background-color: darksalmon;
    height: 26px;
    cursor: pointer;
    overflow: hidden;
}
.scroll ul{
    padding: 0px 60px;
    position: relative;
    line-height: 26px;
    list-style-type: none;
}

3、js行为：

$(function(){
    //每隔1秒循环滚动
    var a=setInterval('auto()',1000);
    $(".scroll").hover(function(){
        //清除滚动
        clearInterval(a);
    },function(){
        //重新滚动
        a=setInterval('auto()',1000);
    })
    auto();
})
function auto(){
    //top的位移高度尽量和scroll的高度相同，可以很好控制滚动范围
    $(".scroll ul").animate({"top":"-26px"},2000,function(){
        //将ul的第一个li加到ul的最后
        $(".scroll ul").css("top","0px").find("li:first").appendTo('ul');
    })
};