jquery无缝滚动文字

最新推荐文章于 2024-01-23 18:00:00 发布

Fayneヾ

最新推荐文章于 2024-01-23 18:00:00 发布

阅读量663

点赞数

本文链接：https://blog.csdn.net/weixin_42988734/article/details/81975087

版权


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style type="text/css">
ul,li{
    margin:0;padding:0
}
#scrollDiv{
    overflow:auto
}
.scrollText{
    width:300px;
    height:100px;
    min-height:25px;
    line-height:25px;
    border:#ccc 1px solid;
    float:left;
    overflow:hidden
}
.scrollText li{
    height:25px;
    padding-left:10px;
}
</style>
<body>
<div id="scrollDiv">
    <div class="scrollText">
        <ul style="margin-top: 0px; ">
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
            <li>这是公告标题的第四行</li>
            <li>这是公告标题的第五行</li>
            <li>这是公告标题的第六行</li>
            <li>这是公告标题的第七行</li>
            <li>这是公告标题的第八行</li>
            <li>这是公告标题的九行</li>
            <li>这是公告标题的第十行</li>
            <li>这是公告标题的第十一行</li>
            <li>这是公告标题的第十二行</li>
        </ul>
    </div>
</div>
<p>配置参数：line：滚动几行；speed：滚动速度；timer：自动滚动间隔</p>

</body>
</html>

<script>
$(document).ready(function(){
    $("#scrollDiv").textSlider({line:1,speed:500,timer:3000});
});

(function($){
    $.fn.textSlider = function(settings){    
        settings = jQuery.extend({
            speed : "normal",
            line : 2,
            timer : 1000
        }, settings);
        return this.each(function() {
            $.fn.textSlider.scllor( $( this ), settings );
        });
    }; 
    $.fn.textSlider.scllor = function($this, settings){
        var ul = $( "ul:eq(0)", $this );
        var timerID;
        var li = ul.children();
        var liHight=$(li[0]).height();
        var upHeight=0-settings.line*liHight;//滚动的高度；
        var scrollUp=function(){
            ul.animate({marginTop:upHeight},settings.speed,function(){
                for(i=0;i<settings.line;i++){
                     ul.find("li:first").appendTo(ul);
                }
                ul.css({marginTop:0});
            }); 
        };
        var autoPlay=function(){
            timerID = window.setInterval(scrollUp,settings.timer);
        };
        var autoStop = function(){
            window.clearInterval(timerID);
        };
        //事件绑定
        ul.hover(autoStop,autoPlay).mouseout();
    };
})(jQuery);
</script>

配置参数：line：滚动几行；speed：滚动速度；timer：自动滚动间隔

Fayneヾ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery无缝滚动文字

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/title&
复制链接

扫一扫