js实现全屏滚动进度条

标签：

jQuery.fn.extend({
ShowProgress: function (msg, top, proffset, widthX, heightX) {
if (msg == null)
msg = "Loading Data......";
if (top == null)
top = 0;
if (proffset == null)
proffset = 0;

var height = 0;
var width = 0;
if (heightX != undefined && heightX != null)
height = heightX;
else
height = parseFloat($(this).css("height"));

if (widthX != undefined && widthX != null)
width = widthX;
else
width = parseFloat($(this).css("width"));
var innerHtml = ‘<div id="‘ + $(this).attr("id") + ‘-cover" class="my-poor-ms-element" style="width:‘ + width.toString() + ‘px;height:‘ + height.toString() + ‘px;border-radius: 0px;left: 0px;top:‘ + top + ‘px;position: absolute;z-index: 999;"></div>‘;
innerHtml += ‘<div id="‘ + $(this).attr("id") + ‘-progress" style="height: 70px;width: 250px;position: absolute;left:‘ + (width / 2 - 125) + ‘px;top:‘ + ((height / 2 - 35) + top + proffset) + ‘px;z-index: 99999;">‘;
innerHtml += ‘ <span style="color: White;margin-left: auto;margin-right: auto;font-size: 14px;left: 50px;">‘ + msg + ‘</span>‘;
innerHtml += (‘ <img src="../..‘ + $RawUrl + ‘/Content/Image/loading.gif" />‘);
innerHtml += ‘</div>‘;
var cover = $(innerHtml);
cover.appendTo(this);
},
CloseProgress: function () {
$("#" + $(this).attr("id") + "-cover").remove();
$("#" + $(this).attr("id") + "-progress").remove();
},
//重新写的Show方法，进度条随着proffset var proffset = document.documentElement.scrollTop;进行变化
ShowProgress_New: function (msg, top, proffset, widthX, heightX) {
if (msg == null)
msg = "Loading Data......";
if (top == null)
top = 0;
if (proffset == null)
proffset = 0;

var height = 0;
var width = 0;
if (heightX != undefined && heightX != null)
height = heightX;
else
height = parseFloat($(this).css("height"));

if (widthX != undefined && widthX != null)
width = widthX;
else
width = parseFloat($(this).css("width"));
var innerHtml = ‘<div id="‘ + $(this).attr("id") + ‘-cover" class="my-poor-ms-element" style="width:‘ + width.toString() + ‘px;height:‘ + height.toString() + ‘px;border-radius: 0px;left: 0px;top:‘ + top + ‘px;position: absolute;z-index: 999;"></div>‘;
innerHtml += ‘<div id="‘ + $(this).attr("id") + ‘-progress" style="height: 70px;width: 250px;position: absolute;left:‘ + (width / 2 - 125) + ‘px;top:‘ + (top + proffset) + ‘px;z-index: 99999;">‘;
innerHtml += ‘ <span style="color: White;margin-left: auto;margin-right: auto;font-size: 14px;left: 50px;">‘ + msg + ‘</span>‘;
innerHtml += (‘ <img src="../..‘ + $RawUrl + ‘/Content/Images/loading.gif" />‘);
innerHtml += ‘</div>‘;
var cover = $(innerHtml);
cover.appendTo(this);
}
}
);

 ------------------------------------

调用：

var virtualPath = "@(Request.ApplicationPath)"; // ‘/EI‘
$RawUrl = "";
if (virtualPath != "/") {
$RawUrl = virtualPath;
}

var proffset = document.documentElement.scrollTop;
var winwidth = document.documentElement.offsetWidth;
var winHeight = document.documentElement.scrollHeight;
$("#form").ShowProgress_New(null, null, proffset + 300, winwidth, winHeight);

js实现全屏滚动进度条

标签：

原文地址：http://www.cnblogs.com/csharphuang/p/4225517.html