会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
stone .!
good good study...
博客园
::
首页
::
新随笔
::
联系
::
订阅
::
管理
公告
javascript+css ---Loading效果
<
style
>
html
{
}
{
BACKGROUND
:
#FFFFFF
;
}
body
{
}
{
MARGIN
:
0px
;
}
form
{
}
{
MARGIN
:
0px
;
}
img
{
}
{
BORDER
:
0px
;
}
div, table, input, button, select, textarea
{
}
{
FONT-FAMILY
:
Tahoma
;
FONT-SIZE
:
12px
;
COLOR
:
#222222
;
}
.debug
{
}
{
BACKGROUND
:
#FFFFFF
;
WIDTH
:
360px
;
BORDER
:
#000000 1px solid
;
TEXT-ALIGN
:
center
;
}
</
style
>
<
script
>
var
i
=
0
;
var
n
=
0
;
var
url
=
'
<a href="http://www.cssrain.cn" target="_blank">http://www.cssrain.cn</a>
'
;
//
转
var
min
=
'
10
'
;
//
进度速度
function
loading()
{
var
l
=
'
320
'
;
//
总长度 该了 div 也要改
var
t
=
'
40
'
;
//
进度条长度
var
h
=
'
20
'
;
//
进度条高度度
if
(i
<
l)
{
if
(i
>=
l
-
t)
{ i
<
l
?
i
++
: i
=
1
; n
=
l
-
i; }
else
{
if
(n
>
t) i
<
l
?
i
++
: i
=
1
;
else
n
++
; }
}
else
{ i
=
0
; n
=
0
; location.href
=
url }
document.getElementById(
'
loading
'
).innerHTML
=
'
<div style="BACKGROUND: #A0E000; MARGIN-LEFT:
'
+
i
+
'
px; WIDTH:
'
+
n
+
'
px; HEIGHT:
'
+
h
+
'
px; OVERFLOW: hidden;"/>
'
;
}
function
debug()
{
var
debug
=
'
<div style="BACKGROUND: #001000; WIDTH: 100%; HEIGHT:
'
+
document.body.clientHeight
+
'
px; FILTER: alpha(opacity=75);"></div>
'
+
'
<div class="debug" style="POSITION: absolute; TOP:
'
+
((document.body.clientHeight
/
2)-32)+'px; LEFT: '+((document.body.clientWidth
/
2
)
-
180
)
+
'
px;">
'
+
'
<div style="PADDING: 10px; FONT-WEIGHT: bold;">Loading..</div>
'
+
'
<div id="loading" style="BACKGROUND: #EEEEEE; WIDTH: 320px; PADDING: 1px; BORDER: #AAAAAA 1px solid; TEXT-ALIGN: left;"></div>
'
+
'
<div style="PADDING: 10px; TEXT-ALIGN: right;">正在处理你的请求,请不要刷新,请稍候..</div>
'
+
'
</div>
'
;
setInterval(
'
loading()
'
, min );
document.getElementById(
'
debug
'
).innerHTML
=
debug;
}
</
script
>
<
body
>
<
div
style
="POSITION: absolute; TOP: 0px; LEFT: 0px;"
id
="debug"
></
div
>
<
button
onclick
="debug();"
>
提交
</
button
>
</
body
>
</
html
>
posted on
2008-05-23 14:54
craig
阅读(
465
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部