码迷,mamicode.com
首页 > Web开发 > 详细

Js实现内容向上循环滚动

时间:2016-06-30 16:09:09      阅读:446      评论:0      收藏:0      [点我收藏+]

标签:

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

//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)

对应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控制权

Js实现内容向上循环滚动

标签:

原文地址:http://www.cnblogs.com/Arlar/p/5630115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!