码迷,mamicode.com
首页 > 其他好文 > 详细

进度条~~

时间:2015-02-11 18:12:45      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

(function($){
    var ImgList=[
        ‘images/logo.png‘,
        ‘images/nav-icon.png‘,
        ‘images/load/load_01.png‘,
        ‘images/load/load_02.png‘,
        ‘images/load/load_03.png‘,
        ‘images/load/load_04.png‘,
        ‘images/load/load_05.png‘,
        ‘images/load/load_06.png‘,
        ‘images/load/load_07.png‘,
        ‘images/load/load_08.png‘,
        ‘images/load/load_09.png‘,
        ‘images/load/load_10.png‘,
        ‘images/load/load_11.png‘,
        ‘images/load/load_12.png‘,
        ‘images/load/load_13.png‘,
        ‘images/load/load_14.png‘,
        ‘images/load/load_15.png‘,
        ‘images/load/load_16.png‘,
        ‘images/load/load_17.png‘,
        ‘images/load/load_18.png‘,
        ‘images/load/load_19.png‘,
        ‘images/load/load_20.png‘,
        ‘images/load/load_21.png‘,
        ‘images/load/load_22.png‘,
        ‘images/load/load_23.png‘,
        ‘images/load/load_24.png‘
    ];
    var WALLET = {
        NUMBER : 0//图片加载计数器
    }
    var methods = {
        loading : function(a,id,parent_sel){
            var len = a.length;
            var le=$(‘.‘+id);
            var wallet_url = "http://static.solaridc.com/project/finance/wallet/v2/";
            for(var i=0; i<len; i++){
                var img = new Image();
                img.onload=function(){
                    WALLET.NUMBER++;
                    le.animate({width:parent_sel.width() / len * WALLET.NUMBER},50)
                };
                img.src= wallet_url+a[i];

                (function(img){
                    return img.onerror = function(){
                        console.log(img.src+"缺少图片")
                    };
                })(img);

                if(i==len-1){
                    parent_sel.resize(function(){
                        var wen = parseInt(parent_sel.width());
                        $(‘.‘+id).width(wen)
                    })
                }
            }            
        },
        bindEvent : function(){

        },
        init : function(){
            methods.loading(ImgList,"loading-length",$(window));
            //methods.loading(ImgList,"header-line",$(".header-bottom"));
        }
    }
    methods.init();
})(jQuery);
<div id="loading"><div class="loading-length" style="width: 1903px;"></div></div>

 

#loading{width:100%;height:3px;overflow:hidden;/*background:#f3f3f3*/}
#loading .loakding-length,.header-line{width:0;height:3px;overflow:hidden;background:#35b558;background:-webkit-gradient(linear,10% 10%,100% 100%,color-stop(0.14,#00aeec),color-stop(0.5,#8aca8c),color-stop(1,#f6ba03))}

 

进度条~~

标签:

原文地址:http://www.cnblogs.com/niunaimidou/p/4286704.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!