日期:2014-05-16  浏览次数:20334 次

js进度条类

纯gif的虚假滚动条类:

var ProcessBar = {
mask: null,
message: null,
initialize: function () {
    this.mask = document.createElement("DIV");
this.mask.className = "mask";
document.body.appendChild(this.mask);

this.message = document.createElement("DIV");
this.message.className = "message";

var text = document.createElement("DIV");
text.id = "message";
text.className = "message-text";
text.appendChild(document.createTextNode("Processing..."));
this.message.appendChild(text);

var bar = document.createElement("DIV");
bar.className = "icon-progress";
this.message.appendChild(bar);

document.body.appendChild(this.message);
    },
    show: function(message, mask) {
    if (message) {
    document.getElementById('message').firstChild.nodeValue = message;
    }
    if (mask) {
        this.mask.style.display = 'block';
    }
    this.message.style.display = 'block';
    },
    hidden: function() {
    this.mask.style.display = 'none';
    this.message.style.display = 'none';
    }
};


css 给出个背景图片
.icon-progress {
    width: 320px;
    height: 15px;
    background: url(../Images/progressbar.gif);
}