jQuery实现无缝滚动条

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery实现无缝滚动条相关的知识,希望对你有一定的参考价值。

很多时候只看别人的代码时很难看懂。有很多原因,有时候可能是没有耐心,这时候看一下实现的原理就很快明白代码的内容,所以要加些注释,让自己让别人都能看明白;有的时候就是因为知识有限就是不懂,哪怕代码很简单,这就需要多学习了

<!DOCTYPE html>
<html>
<head>
    <title>滚动公告</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            padding: 0px;
            margin:0px;
        }
        #container{
            border: 1px yellow solid;
            width: 500px;
            height: 30px;
            line-height:30px;
            overflow: hidden;
        }
        .content{
            width:500px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="content" class="content">
        <a href=#  id="f12red1" class="f12red">1111111111111111111111111111111111111111</a><br/>
        <a href=# class="f12red">222222222222222222222222222222222222222222</a><br/>
        <a href=# class="f12red">33333333333333333333333333333333333333333333</a><br/>
    </div>
    <div id="content1" class="content"></div>
</div>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    //将content的内容复制到content1
    $("#content1").html($("#content").html());
    //实现的无缝滚动主函数
    var marquee=function(){
        if ($("#container").scrollTop() >= $("#content").height()) { //当滚动条隐藏的长度大于div1的宽度
            $("#container").scrollTop(0);
        }
        else{
            $("#container").scrollTop($("#container").scrollTop()+1);   //每次滚动条往右移动1px;
        }
       
    }
    //主函数做循环
    var mar=setInterval(marquee,100);
    $(".f12red").mouseenter(function(){
        clearInterval(mar);
    }).mouseleave(function(){
        mar=setInterval(marquee,100);
    })
</script>
</body>
</html>

这段代码其实有一些缺陷,含需要认真打磨,希望高手指点。

1.滚动到第一个a标签有明显的延迟

2.当鼠标移动到上面时a标签无法移动到中间

3.在滚动是如果有延迟就更好了,方便用户观看相关内容

以上是关于jQuery实现无缝滚动条的主要内容,如果未能解决你的问题,请参考以下文章

让table表头固定,tr超出指定条数后无缝上下循环滚动jquery效果代码

JQuery实现文字无缝滚动效果 Marquee插件

几条jQuery代码片段助力Web开发效率提升

jQuery 实现无缝滚动

怎么实现marquee标签的向上无缝滚动?

jquery实现文字上下循环无缝滚动效果