• 最新新闻、最新文章,JavaScript实现无缝循环滚动


    最新新闻、最新文章,JavaScript实现无缝循环滚动(基于jQuery)。

    JS代码如下:

    <script type="text/javascript">
            $(function () {
                if ($("#ulDynamic").height() > 200) {
                    $("#ulDynamic").height(200);
                    $("#ulDynamic").css("overflow", "hidden");
                    var scroll = new s("#ulDynamic", "#ulDynamic li", 30); //参数为滚动速度,单位毫秒
                    scroll.bind();
                    scroll.start();
                }
            });

            function s(containerSelector, childSelector, speed) {
                this.containerSelector = containerSelector;
                this.childSelector = childSelector;
                this.rotator = $(this.containerSelector);
                this.speed = speed || 30;
                this.tid = this.tid2 = this.firstLi = null;
                this.num = 0;
                this.liCount = $(this.childSelector).length;
            }
            s.prototype = {
                bind: function () {
                    var o = this;
                    this.rotator.hover(function () { o.end(); }, function () { o.start(); });
                },
                start: function () {
                    if ($(this.childSelector).length == this.liCount) {
                        this.firstLi = $(this.childSelector + ":first-child");
                        this.rotator.append(this.firstLi.clone());
                    }
                    var o = this;
                    this.tid = setInterval(function () { o.rotation(); }, this.speed);
                },
                end: function () {
                    clearInterval(this.tid);
                    clearTimeout(this.tid2);
                },
                rotation: function () {
                    var o = this;
                    var firstLi = $(this.childSelector + ":first-child");
                    this.num++;
                    this.rotator[0].scrollTop = this.num;
                    if (this.num == this.firstLi[0].scrollHeight + 0) {
                        clearInterval(this.tid);
                        this.firstLi.remove();
                        this.num = 0;
                        this.rotator[0].scrollTop = 0;
                        this.tid2 = setTimeout(function () { o.start(); }, 0);
                    }
                }
            }
        </script>

    页面代码如下:

    <div>
            <ul id="ulDynamic" style="margin:0px; padding:0px;">
                <li>看1</li>
                <li>看这2</li>
                <li>的代码3</li>
                <li>动的代码4</li>
                <li>看码5</li>
                <li>看这的代码6</li>
                <li>看这个向上滚动的代码7</li>
                <li>看这个向动的代码8</li>
                <li>看向上滚动9</li>
                <li>看这个向动的代码10</li>
                <li>看这个向上的代码11</li>
                <li>看滚动的代码12</li>
                <li>看这个向上滚动的代码13</li>
                <li>看这个向上滚动的代码14</li>
                <li>看这个向上滚动的代码15</li>
            </ul>
        </div>

    (水平有限,仅供参考。)

  • 相关阅读:
    HTTP请求报文
    NSInteger和int分别在什么时候使用
    iOS开发之一些字符串常用的代码
    NSTimer用法
    property 'count' not found on object of type 'NSMutableArray
    详解MAC硬盘中各个文件夹
    如何在Mac下显示Finder中的所有文件
    xcode运行时出现attaching to
    ios sandbox
    使用sqlite存取数据
  • 原文地址:https://www.cnblogs.com/liuwentian/p/2973739.html
Copyright © 2020-2023  润新知