/*进度条*/ //杨俊源 //命名空间 Namespace.register("U.Control.Bar"); //调用的主函数 返回Content //U.Control.Bar.loadImg(src,width,height) U.Control.Bar.Box = function () { return document.body.appendChild(U.Control.Bar.loadImg("http://fs.1473.cn/3e5b78e0-6ded-4386-b643-dd27d15fc007.jpg", 500, 600)); //传参(src,width,height) } //加载图片 U.Control.Bar.loadImg = function (imgUrl, width, height) { //var content = $("#"+content)[0]; //创建一个div var content = $$("div", { "id": "Image", "style": { "cssText": "width:" + width + "px;height:" + height + "px"} }); // content.style.position = "relative"; content.style.position = "absolute"; //div的底层 var bg = $$("img", { "style": { "cssText": "width:100%;height:100%;opacity:1;position:absolute;"} }, content); //div遮罩层 var divs = $$("div", { "style": { "cssText": "width:100%;height:100%;background:#fff;opacity: 1;transition: 0.8s all;position: relative;"} }, content); //进度条。。。 var progress = $$("div", { "style": { "cssText": "width: 100%;height: 28px;border-radius: 16px;background: rgb(33, 176, 252);position: absolute;display: inline-block;top: 50%;margin-top: -14px;"} }, divs); var div = $$("div", { "style": { "cssText": "width: 99%;height: calc(100% - 10px);margin: auto;border-radius: 16px;background: rgb(255, 255, 255);margin-top: 4px;border: 1px solid #fff;"} }, progress); var bar = $$("div", { "style": { "cssText": "width: 0%;height: 100%;background: rgb(33, 176, 252);border-radius: 16px;transition: 4s all;"} }, div); //var barA = $$("div",{"style":{"cssText":"float:right"}},bar); //var barF = $$("a",{"innerHTML":"1"},barA); //var barFB = $$("a",{"innerHTML":"%"},barA); //进度条上下居中 //progress.style.top = (parseInt(content.style.width)-progress.offsetHeight)/2+"px"; setTimeout(function () { bar.style.width = "98%"; }, 1); //$(bar).animate({"width":"98%"},1000); //bar.style.width="98%"; var img = new Image(); img.src = imgUrl; //图片加载完成 img.onload = function () { $(bar).animate({ "width": "100%" }, 100); setTimeout(function () { divs.style.cssText += "opacity:0"; U.Alert("加载完成"); }, 2000); bg.src = img.src; } return content; } /*U.Control.Bar End*/