javascript 前端进度条效果<title>网页loading</title>
<script language="javascript">
function setSB(v, el) {
var ie5 = (document.all && document.getElementsByTagName);
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "/";
else {
setSB(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
}
}
</script>
</head>
<body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#CCCCCC>
<center>
<p align=center style="font-szie:9pt; line-height: 100%">正在加载请稍侯……</p>
<span id=sb style="width: 500px">
<div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #9999ff"></div>
<div style="font-size: 12px; width: 100%; color: #ff3333; font-family: arial; text-align: center"></DIV>
</span>
</center>
</body>
</html>
<html xmlns="http://schemas.microsoft.com/intellisense/html-401">
<head>
<title>一个JS做的相当漂亮的进度条</title>
</head>
<body>
</body>
<script type="text/jscript">
function DoubleAnimation(target,targetProperty,from,to,Duration)
{
this.Begin=function anonymous()
{
target[targetProperty]=from;
var starttime=new Date();
setTimeout(StoryBoard(),1);
function StoryBoard()
{
return function()
{
var now=new Date();
var d=now.getTime()-starttime.getTime();
target[targetProperty]=Math.round(from+(to-from)*d/Duration);
if(d<Duration)setTimeout(StoryBoard(),10);
}
}
}
this.setTo=function(val){to=val;}
this.setFrom=function(val){from=val;}
}
function ProgressBar(ID)
{
document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:10%;width:100; left: 108px;\"> <image src=\"http://www.qpsh.com/icon/emptypb.jpg\" style=\"position: absolute;left: 84px; top: 137px;\" /> <div id=\""+ID+"pb\" style=\"position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;\" > <img src=\"http://www.qpsh.com/icon/iconfullpb.jpg\"/> <div id=\""+ID+"highlight\" style=\"background:#ffffff;left: -500px; position: absolute; top: -1px;width:100;height:20;filter:Alpha(Opacity=75,FinishOpacity=0,Style=2)\"></div> </div> <div style=\"position:absolute;top:83px;width:180px; left: 148px;\"> 加载中请稍候...... </div> </div>");
var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)
var stophandle=setInterval(story.Begin,2000);
this.set=function(percentage)
{
document.getElementById(ID+"pb").style.width=Math.round(percentage*329/100);
}
}
var pb1=new ProgressBar("ok");
var p=0;
function loading()
{
pb1.set(p+=0.3);
if(p<100)
setTimeout(loading,2);
else
window.location.href="http://www.qpsh.com";
}
loading();
</script>
</html>
分享到:
相关推荐
javascript 椭圆进度条效果代码! javascript 椭圆进度条效果代码!
javascript 实现的进度条效果 javascript 实现的进度条效果
原生js实现可拖拽进度条效果 特效 左右滑动进度条
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...
JS进度条,实现同步增长效果,我觉得很好用,大家可以下载下来试试。
原生js百分比进度条效果,可以实现百分比进度条外观样式
最近这两天一直在为大家分享一些HTML5、CSS和SVG的炫酷动画,...这次我们来介绍一款实用的jQuery进度条插件,这款jQuery进度条插件的外观利用了CSS3的特性,让进度条外观显得非常时尚漂亮,一共有10种样式,非常实用。
一个是用FLASH实现的 (这个网上很多网站都是,不说了) 一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了) 这里,我们的重点是用 CSS+JS 实现这个效果 好了,废话不多说,我们开始 首先,写一段HTML...
js完美进度条,做效果的不二选择.。
简单的js进度条,在网络加载时使用,做过渡效果 ,非常适合新手学习参考
一个非常简单的纯js实现的loading动画效果 由于没有实际的进度显示 故这里只用js的setInterval模拟加载效果 原理就是不断改变CSS中内部一个div的宽度以此达到加载的样式效果 使用方法: 1、将CSS样式...
vs2013 利用Ajax+Jquery实现异步进度条效果
loading动画加载进度条效果是一款纯css3 animation动画属性页面loading动画加载进度条效果。
第一种方法:Loading.js 代码如下: //频率 var frequency = 50;... *left:进度条显示位置left *top:进度条显示位置top */ function Loading(content, imageURL, left, top) { imageURL = imageURL +
HTML5实现简单进度条效果 HTML5实现简单进度条效果.zip
MProgress.js是一款谷歌Material Design风格纯JS进度条插件。该进度条通过纯JS和CSS3来制作,没有外部依赖库。你可以通过MProgress.js制作出4种不同类型的Material Design风格进度条效果。
js imageflow.js插件带进度条拖动倒影图片放大效果 js imageflow.js插件带进度条拖动倒影图片放大效果
基于JQuery的动态进度条,使用简单方便: $("#processbar").progressBar(30);