Javascript教程:模拟metro UI的等待进度条案例
window.onload = function () {
var runline = null;
var RunLineBox = document.getElementsByTagName("div");
var length = RunLineBox.length;
var ArrayRunLineBox = new Array;
for (var i = 0; i < length; i++) {
ArrayRunLineBox[i] = RunLineBox[i]
}
for (var i = 0; i < length; ++i) {
if (ArrayRunLineBox[i].className != "runLineBox") {
ArrayRunLineBox.remove(i);
--length;
--i;
}
}
var RunLine = function (obj, marginLeft) {
var FPS =500; //动画的帧数
var oldMarginLeft = parseInt(obj.style.marginLeft);
var line = function (X, AllWidth) {//动画的v-t公式
var E = AllWidth / (1.408823456862077 * FPS); //此微积分的常量,随其他变量变化而变化
var h1 = 236;
var h2 = 382;
var h3 = 236;
var h4 = 146;
var x = X / FPS;
if (x < 0.236) {
y = E * (Math.cos(Math.PI * x * 500 / h1 + Math.PI / 2) + 1);
}
else if (x < 0.618) {
y = 2 * E * (Math.cos(Math.PI * (x - h1/1000) * 1000 / h2 + Math.PI) + 1);
}
else if (x < 0.854) {
y = 2 * E * (Math.cos(Math.PI * (x - (h1 + h2) / 1000) * 1000 / h3) + 1);
}
else {
y = E * (Math.cos(Math.PI * (x -
(h1 + h2 +h3) / 1000 ) * 500 / h4 + Math.PI) + 1);
}
var Y = 500 - (y * 100);
// document.getElementById("pic").innerHTML += "<div></div>"
return y;
};
var Left = 0;
(function () {
var AllWidth = document.body.clientWidth; //默认长度为浏览器窗口宽度
var ALLWIdth_1 = AllWidth * 0.62;
var ALLWIdth_2 = (AllWidth - ALLWIdth_1) / 2;
Left += line(marginLeft, AllWidth);
++marginLeft;
if (marginLeft >= FPS) {
marginLeft = 0;
obj.style.marginLeft = "0px";
Left = 0;
//return 0;
}
if ((Left + oldMarginLeft) > AllWidth) {
obj.style.display = "none";
}
else {
obj.style.display = "";
}
obj.style.marginLeft = (Left + oldMarginLeft) + "px";
if ((Left + oldMarginLeft) > MAX) {
MAX = Left + oldMarginLeft;
}
//document.getElementById("contore").innerHTML = MAX;
runline = setTimeout(arguments.callee, 10);
})()
};