1.列表滚动js
/* 蔡燃 列表自动滚动 v1.0.0 备注:需要jquery*/
/**
* 列表自动滚动
* @param data 列表数据
* @param el 列表绑定的元素
* @param options 配置
*/
function listRoll(data, el, options) {
var defaults = {
movePx: 1,//移动距离(px)
moveTime: 20,//移动时间间隔(毫秒)
showNum: 5,//显示条数
showItemHeight: 40,//每个条目的高度
template: null,//把键值对数据转显示的HTML代码方法
click: null,//点击事件回调方法
movePause: true//鼠标移动到滚动列表上是否暂停滚动
};
$.extend(defaults, options);
var dataSize = data.length;
var listData = [];
var colRefreshHeight = -defaults.showNum * defaults.showItemHeight;//刷新数据的高度
var pageSize = defaults.showNum * 2;
var indexStart = 0;//data设置到显示列表数据的下标
var startPx = 0;//滚动位置
var $el = $(el);
var rollTimeOut = null;
if (defaults.movePause) {
//鼠标移入暂停滚动
$el.bind("mousemove", function () {
if (rollTimeOut) {
clearTimeout(rollTimeOut);
}
}).bind("mouseout", function () {
rollTimeOut = setTimeout(function () {
roll()
}, defaults.moveTime);
});
}
//设置滚动列表数据
function setListData() {
var i;
if (listData.length === 0) {
if (pageSize < dataSize) {
for (i = 0; i < indexStart + pageSize; i++) {
listData.push(getTemplateHtml(data[i],i));
}
indexStart += pageSize;
} else {
for (i = 0; i < dataSize; i++) {
listData.push(getTemplateHtml(data[i],i));
}
indexStart = pageSize - dataSize;
for (i = 0; i < indexStart; i++) {
listData.push(getTemplateHtml(data[i],i));
}
}
} else {
listData.splice(0, defaults.showNum);
if (indexStart + defaults.showNum <= dataSize) {
for (i = indexStart; i < indexStart + defaults.showNum; i++) {
listData.push(getTemplateHtml(data[i],i));
}
indexStart += defaults.showNum;
} else {
for (i = indexStart; i < dataSize; i++) {
listData.push(getTemplateHtml(data[i],i));
}
indexStart = indexStart + defaults.showNum - dataSize;
for (i = 0; i < indexStart; i++) {
listData.push(getTemplateHtml(data[i],i));
}
}
}
}
function getTemplateHtml(dataItem,index) {
if (defaults.template != null) {
return defaults.template(dataItem,index);
} else {
return dataItem;
}
}
if (defaults.showNum < dataSize) {
setListData();
$el.html(listData.join());
//滚动
function roll() {
startPx -= defaults.movePx;
if (startPx === colRefreshHeight) {
startPx = 0;
setListData();
$el.html(listData.join());
}
$el.css({"top": startPx + "px"});
rollTimeOut = setTimeout(arguments.callee, defaults.moveTime);
}
roll();
} else {
$el.html(data.join());
}
}
2.效果