zoukankan      html  css  js  c++  java
  • Js实现内容向上无缝循环滚动

    当前项目有一个类似公告向上滚动的需求,在网上搜索到一个比较棒的程序,现摘录如下:

    //document.getElementById()的最简化应用
    function $(element) {
        if (arguments.length > 1) {
            for (var i = 0, length = arguments.length, elements = []; i < length; i++) {
                elements.push($(arguments[i]));
            }
            return elements;
        }
        if (typeof element == "string") {
            return document.getElementById(element);
        } else {
            return element;
        }
    }
    //类创建函数
    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            }
        }
    }
    //对象属性方法扩展
    Function.prototype.bind = function (object) {
        var method = this;
        return function () {
            method.apply(object, arguments);
        }
    }
    var Scroll = Class.create();
    Scroll.prototype = {
        //第一个参数定义要滚动的区域,第二个参数定义每次滚动的高度,第三个参数定义每次滚动的时间间隔(按秒计算)
        initialize: function (element, height, delay) {
            this.element = $(element);
            this.element.innerHTML += this.element.innerHTML;
            this.height = height;
            this.delay = delay * 1000;
            this.maxHeight = this.element.scrollHeight / 2;
            this.counter = 0;
            this.scroll();
            this.timer = "";
            this.element.onmouseover = this.stop.bind(this);
            this.element.onmouseout = function () { this.timer = setTimeout(this.scroll.bind(this), 1000); }.bind(this);
        },
        scroll: function () {
            if (this.element.scrollTop < this.maxHeight) {
                this.element.scrollTop++;
                this.counter++;
            } else {
                this.element.scrollTop = 0;
                this.counter = 0;
            }
    
            if (this.counter < this.height) {
                this.timer = setTimeout(this.scroll.bind(this), 5);
            } else {
                this.counter = 0;
                this.timer = setTimeout(this.scroll.bind(this), this.delay);
            }
        },
        stop: function () {
            clearTimeout(this.timer);
        }
    }
    new Scroll('a', 22, 1) //适当调整第2和第3个参数呈现效果稍有差异

    对应Html和Css如下:

    ul {
        margin:100px;
        height:22px; border:1px solid red;
        overflow:hidden;
    }
    li {
        height:22px; line-height:22px; font-size:12px;
    }
    
    <ul id="a">
        <li>1-1</li>
        <li>1-2</li>
        <li>1-3</li>
        <li>1-4</li>
    </ul>

    在使用上面示例程序过程中注意下面这个自定义行为可能会与jQuery或其他Js库或程序发生命名冲突

    function $(element) {
      ......
    }

    解决方案1:将function $(element){......}重新命名
    解决方案2:对于引入了jQuery库的项目,可用jQuery.noConflict()方法让渡变量$的jQuery控制权
  • 相关阅读:
    jqGrid jqGrid 参数
    jqgrid问题总结
    quartz的配置表达式
    Struts2接收参数的几种方式
    Perl爬虫代码
    PHP官方的PECL扩展有问题
    Perl单URL爬虫
    Perl 多进程进度条
    Perl Tk摸索
    hdu 2058 数学题
  • 原文地址:https://www.cnblogs.com/Arlar/p/5630115.html
Copyright © 2011-2022 走看看