JS技术

Javascript教程:模拟metro UI的等待进度条案例_Javascript教程

字号+ 作者:H5之家 来源:H5之家 2015-09-15 16:22 我要评论( )

Javascript教程:模拟metro UI的等待进度条案例,学习Javascript教程:模拟metro UI的等待进度条案例,Javascript教程:模拟metro UI的等待进度条案例,查看Javascr

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);
                })()
            };

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评