/*
- 列表定時(shí)滾動(dòng)效果(javascript)
- @listId :滾動(dòng)列表ID
- @listTagName :滾動(dòng)元素
- @scrollNum :設(shè)置滾動(dòng)元素?cái)?shù)量
- @speed : 滾動(dòng)速度
*/
function fnScrollList() {
this.init.apply(this, arguments);
}
fnScrollList.prototype = {
init: function (listId, TagName, scrollNum, speed) {
var _this = this;
this.oList = this.$$(listId);
this.scrollTimer = null;
this.speed = speed || 1000;
this.scrollNum = scrollNum || 0;
this.TagName = TagName;
this.distance = this.oList.getElementsByTagName(TagName)[0].offsetHeight * this.scrollNum;//列表移動(dòng)距離
this.oList.style.marginTop = 0 + "px";
this.oList.onmouseover = function () {
_this.pause();
}
this.oList.onmouseout = function () {
_this.scrollTimer = setTimeout(function () {
_this.play();
}, _this.speed);
}
this.play();
},
play: function () {
var _this = this;
var options = {'marginTop': '-' + _this.distance};
_this.anim(_this.oList, options, function () { //回調(diào)函數(shù),移動(dòng)列表元素
for (var i = 0, j = 0; i < _this.scrollNum; i++) {
var node = _this.oList.getElementsByTagName(_this.TagName)[j];
if (_this.TagName == "tr") {
_this.oList.getElementsByTagName('tbody')[0].appendChild(node);
} else {
_this.oList.appendChild(node);
}
}
_this.oList.style.marginTop = "0px";
});
_this.scrollTimer = setTimeout(function () {
_this.play(_this.distance);
}, _this.speed);
},
pause: function () {
clearTimeout(this.scrollTimer);
},
//動(dòng)畫(huà)函數(shù)
anim: function (oElement, oAttr, fnCallback) {
var _this = this;
clearInterval(oElement.timer);
oElement.timer = setInterval(function () {
var bStop = true;
for (var property in oAttr) {
var iCur = parseFloat(_this.css(oElement, property)); //獲取當(dāng)前位置屬性值
var iSpeed = (oAttr[property] - iCur) / 5; //移動(dòng)進(jìn)度
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (iCur != oAttr[property]) { //如果當(dāng)前數(shù)值不等于目標(biāo)數(shù)值,則數(shù)值遞增
bStop = false;
_this.css(oElement, property, iCur + iSpeed);
}
}
if (bStop) {
clearInterval(oElement.timer);
fnCallback && fnCallback.apply(_this, arguments);
}
}, 50);
},
//處理樣式函數(shù)
css: function (oElement, attr, value) {
if (arguments.length == 2) {
return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr];
} else if (arguments.length == 3) {
switch (attr) {
case "top":
case "left":
case "marginTop":
oElement.style[attr] = value + "px";
break;
default:
oElement.style[attr] = value;
break;
}
}
},
$$: function (o) {
if (o) {
return document.getElementById(o);
}
}
};
var list = new fnScrollList('list', 'li', 0, 3000);