Js实现内容向上⽆缝循环滚动当前项⽬有⼀个类似公告向上滚动的需求，在⽹上搜索到⼀个⽐较棒的程序，现摘录如下：
//ElementById()的最简化应⽤
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") {
ElementById(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 = ate();
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.scroll();
this.timer = "";
useover = this.stop.bind(this);
useout = function () { this.timer = setTimeout(this.scroll.bind(this), 1000); }.bind(this);
},
scroll: function () {
if (this.element.scrollTop < this.maxHeight) {
this.element.scrollTop++;
} else {
this.element.scrollTop = 0;
}
if (unter < this.height) {
this.timer = setTimeout(this.scroll.bind(this), 5);
} else {
this.timer = setTimeout(this.scroll.bind(this), this.delay);
}
},
stop: function () {
clearTimeout(this.timer);
js arguments}
}
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库的项⽬，可

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。