JavaScript无缝滚动插件

最新推荐文章于 2024-05-21 16:30:15 发布

ClassicSong

最新推荐文章于 2024-05-21 16:30:15 发布

阅读量839

点赞数

分类专栏：插件类文章标签： javascript 无缝滚动 cloneNode white-spacenowrap 代码

本文链接：https://blog.csdn.net/ernijie/article/details/51088002

版权

插件类专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这是一款无缝滚动插件，支持横向和纵向滚动。有需要的尽管拿去哦。

插件的核心用到了cloneNode()

注意事项：

1、只有滚动容器中的内容宽度（高度）超过容器的宽度（高度）时，才可以正常滚动，（个人认为是内容没有超出容器时，是不存在scrollLeft或者scrollTop的，如果不对，希望高人指点） 2、写横向滚动的容器样式时，请不要忘记添加不换行样式，即white-space:nowrap;

直接上代码：

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字无缝滚动</title>
    <style>
        div,ul,li{padding:0;margin:0;}
        li{list-style:none;}
        #js_scroll_left{white-space:nowrap;  width:300px; height:30px; line-height:30px; background:#ea4c89; overflow:hidden;}
        #js_scroll_left ul{ display:inline; }
        #js_scroll_left ul li{ display:inline; margin:0 10px; font-size:14px; color:#fff; }

        #js_scroll_top{ width:100px; height:100px; line-height:30px; background:#ffd200; overflow:hidden; padding:10px; margin:50px 0 0;}
        #js_scroll_top ul{  }
        #js_scroll_top ul li{ font-size:14px; color:#262a2d; }
    </style>
</head>
<body>
    <div id="js_scroll_left">
        <ul>
            <li>我是滚动文字！</li>
            <li>我是滚动文字！</li>
            <li>我是滚动文字！</li>
        </ul>
    </div>
    <div id="js_scroll_top">
        <ul>
            <li>我是滚动文字！</li>
            <li>我是滚动文字！</li>
            <li>我是滚动文字！</li>
            <li>我是滚动文字！</li>
        </ul>
    </div>
<script type="text/javascript" src="js/scrollFn.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var scrollObj01 = document.getElementById("js_scroll_left");
        scrollObj01.scrollLeft =
        scroll({
            obj:scrollObj01,
            direction:"left",
            ele:"ul",
            time:50
        });
        var scrollObj02 = document.getElementById("js_scroll_top");
        scroll({
            obj:scrollObj02,
            direction:"top",
            ele:"ul",
            time:50
        });
    }
</script>
</body>
</html>

javascript:


;(function(window){
    function Scroll(cfg){
        this.cfg = cfg||null;
        this.scrollFn();
    }
    Scroll.prototype.scrollFn = function(){
        var cfg = this.cfg;
        var temp = cfg.obj.getElementsByTagName(cfg.ele);
        temp = temp.item(0).cloneNode(true);
        cfg.obj.appendChild(temp);

        function marquee(){
            if(cfg.direction=="left"){
                if(cfg.obj.scrollLeft>=temp.offsetWidth){
                    cfg.obj.scrollLeft-=temp.offsetWidth;
                }else{
                    cfg.obj.scrollLeft++;
                }
            }else if(cfg.direction=="top"){
                if(cfg.obj.scrollTop>=temp.offsetHeight){
                    cfg.obj.scrollTop-=temp.offsetHeight;
                }else{
                    cfg.obj.scrollTop++;
                }
            }
        }
        var timer = setInterval(marquee,cfg.time);
        cfg.obj.onmouseover = function () {
            clearInterval(timer);
        };
        cfg.obj.onmouseout = function(){
            timer = setInterval(marquee,cfg.time);
        }

    }
    window.scroll = function(cfg){
        return new Scroll(cfg);
    }
})(window)

ClassicSong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript无缝滚动插件

这是一款无缝滚动插件，支持横向和纵向滚动。有需要的尽管拿去哦。插件的核心用到了cloneNode()注意事项：1、只有滚动容器中的内容宽度（高度）超过容器的宽度（高度）时，才可以正常滚动，（个人认为是内容没有超出容器时，是不存在scrollLeft或者scrollTop的，如果不对，希望高人指点） 2、写横向滚动的容器样式时，请不要忘记添加不换行样式，即white-spac
复制链接

扫一扫