论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

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

文章类别：Javascript | 发表日期:2012-6-11 10:01:32

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 class='point' style='top:" + Y + "px;left:" + X + "px'></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);
                })()
            };

            setTimeout(function () { RunLine(ArrayRunLineBox[3], 0) }, 0);
            setTimeout(function () { RunLine(ArrayRunLineBox[2], 0) }, 500);
            setTimeout(function () { RunLine(ArrayRunLineBox[1], 0) }, 1000);
            setTimeout(function () { RunLine(ArrayRunLineBox[0], 0) }, 1500);

        };
    </script>
</head>
<body>
<div id="pic">
<div class="point" style="top:10px;left:10px;"></div>
</div>
    <p id="CenterLine">
    </p>
    <div>
        <div class="runLineBox" style="margin-left: 5px">
        </div>
        <div class="runLineBox" style="margin-left: 20px">
        </div>
        <div class="runLineBox" style="margin-left: 35px">
        </div>
        <div class="runLineBox" style="margin-left: 50px">
        </div>
    </div>
    <br />
    <br />
    <div id="contore">
    </div>
</body>
</html>

JS模拟metro UI的等待进度条，圆圈转转转的等待通用性比较差吧，下面我们一起来看看下面的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>主页面</title>
    <style>
    *
{
    margin:0px;
    padding :0px;
    border:0px;
    }
#CenterLine
{
    width:100%;
    height:5px;
    background-color:Blue;
    margin-top:20%;
    }
    .runLineBox
    {
        width:8px;
        height:8px;
        background-color:Blue;
        float:left;
        margin:5px;
        position:absolute;
     
        }
.point
{
    width:1px;
    height:1px;
    background-color:Black;
    position:absolute;
    }
    </style>
    <script type="text/javascript">
        Array.prototype.remove = function (x) {
            if (isNaN(x) || x > this.length) { return false; }
            for (var i = 0, n = 0; i < this.length; i++) {
                if (this[i] != this[x]) {
                    this[n++] = this[i]
                }
            }
            this.length -= 1
        }
        var MAX = 0
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058