1. 论坛系统升级为Xenforo，欢迎大家测试！
    排除公告

载入Loadbar，另一种很酷的载入效果

本帖由 srsman 于 2006-06-05 发布。版面名称：前端开发

  1. srsman

    srsman Active Member

    注册:
    2005-11-08
    帖子:
    1,920
    赞:
    6
    HTML:
    <style type="text/css"><!--
.LoadBarDiv {
        BORDER-RIGHT: #777 1px dotted; BORDER-TOP: #777 1px dotted; DISPLAY: block; FONT-WEIGHT: normal; FONT-SIZE: 12px; FILTER: Alpha(Opacity=80, FinishOpacity=10, Style=1, StartX=1, StartY=1, FinishX=1, FinishY=100); ; LEFT: expression((this.parentElement.offsetWidth-this.offsetWidth)/2); VERTICAL-ALIGN: middle; BORDER-LEFT: #777 1px dotted; WIDTH: 250px; WORD-BREAK: break-all; BORDER-BOTTOM: #777 1px dotted; FONT-FAMILY: "??", "Arial", "Helvetica", "sans-serif"; POSITION: absolute; HEIGHT: 78px; BACKGROUND-COLOR: #f1f1f1
}
--></style>
<script language="JavaScript">
//¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤欢迎下载研究^谢谢¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
// 恭喜你找到地址 想必很稀饭这个效果吧 ^^我可是做了很久的哦 ~ 嗯!眼光8错的说~~
// 把此函数直接引用在网页中就可以了  记得前面要加载它的css样式哦 不懂的可以问我的说~~
// == Page LoadBar ==
//:: Version.0.4
//:: Powered by Snow :: @ 2006.4.4
//:: QQ:49054026 ::
//:: Mail:[email protected] ::
//¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤


//+(长宽兼容性函数)+-------------------------------------------||
function scrollTop()        //浏览器滚动条位置
{
        var scrollTop;
        if (document.documentElement && document.documentElement.scrollTop){
                scrollTop = document.documentElement.scrollTop;
        }else if (document.body){
                scrollTop = document.body.scrollTop;
        }else if (window.pageYOffset){
                scrollTop = window.pageYOffset;
        }
        return scrollTop;
}

//浏览器窗口参数定义及获取函数，兼容IE6＆MF by nokersang ＊
function scrollX(){

if(document.documentElement.clientWidth<document.body.clientWidth&&document.documentElement.clientWidth){
        theX = 'document.documentElement.clientWidth';
}else{
        theX = 'document.body.clientWidth';
}


if(document.documentElement.clientHeight<=document.body.clientHeight&&document.documentElement.clientHeight){
        theY = 'document.documentElement.clientHeight';
}else{
        theY = 'document.body.clientHeight';
}
}
//scrollX();
//-------------------------------------------------------||

//+(配置函数)+-------------------------------------------||
function LoadBar_setvalue(){
LoadBar_Div = document.getElementById('LoadBar');
LoadBar_Msg = document.getElementById("LoadBar_Message");
LoadBar_Top = 250;
LoadBar_Div.style.top = LoadBar_Div.offsetTop + LoadBar_Top;
LoadBar_Div.filters.alpha.opacity = 50;
LoadBar_Delta = 0.05;
LoadBar_breathstep = 1;
LoadBar_hide_down_y_increase = 50;
LoadBar_Hide_downDelta  = 0.06;
LoadBar_Hide_upDelta  = 0.03;
LoadBar_hide_startalpha = 70;
}
//-------------------------------------------------------||

//+(放置LoadBar)+---------------------------------------||
function LoadBar_writebar(){
document.writeln("<div>");
document.writeln("<div id=\"LoadBar\" class=\"LoadBarDiv\">");
document.writeln("<div id=\"LoadBar_Message\" align=\"center\">");
document.writeln("<br>测试LoadBar<br \/>中间LoadBar_Div <br \/>  Made by Snow <br \/> [url]www.xunuo.com[/url] <br \/>");
document.writeln(" <font id=dot color=blue><\/font>");
document.writeln("<\/div>");
document.writeln("<\/div>");
document.writeln("<\/div>");
}
//-------------------------------------------------------||

//+(跟随滚动条滚动)+-------------------------------------||
function LoadBar_move()
{
  if (LoadBar_Div.offsetTop != (scrollTop() + LoadBar_Top)) {
    var dy = (scrollTop() + LoadBar_Top - LoadBar_Div.offsetTop) * LoadBar_Delta;
    dy = (dy > 0 ? 1 :  - 1) * Math.ceil(Math.abs(dy));
    LoadBar_Div.style.top = LoadBar_Div.offsetTop + dy;
  }
  
  /*  注意 ..可能还没有偏移完就停止偏移了...因为LoadBar_SetIV函数clearInterval了LoadBar_move
  if(LoadBar_Div.offsetLeft!=Math.round((eval(theX)-752)*0.25-50)){
        var dx=((eval(theX)-752)*0.25-100-LoadBar_Div.offsetLeft) * LoadBar_Delta;
        dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
        LoadBar_Div.style.left=LoadBar_Div.offsetLeft+dx+"px";
          }
        */

}
//-------------------------------------------------------||


//+(LoadBar的渐显函数)+----------------------------------||
var LoadBar_breath_b = 0,LoadBar_breath_c = true;
function LoadBar_breath()
{
var n = LoadBar_breathstep,b = LoadBar_breath_b,c = LoadBar_breath_c;
if(b>=90) {c = false;}
if(c == false) {b-=n;}
if(b<=10) {c = true;}
if(c == true) {b+=n;}
LoadBar_Div.filters.alpha.opacity=b;
LoadBar_breath_b = b;
LoadBar_breath_c = c;
}
//-------------------------------------------------------||


//+(LoadBar的闪人函数)+----------------------------------||

var hide_upturn=false;
var hide_upturnnow = false;
function LoadBar_Hide()
{
clearInterval(IV_LoadBar_move);
clearInterval(IV_LoadBar_breath);

LoadBar_Msg.innerHTML="<br><font color=red>载入完毕</font><br><font color=blue>测试中..^_^<br>[url]www.xunuo.com[/url]</font>";

if(hide_upturn == false)
{
        LoadBar_Div.filters.alpha.opacity = LoadBar_hide_startalpha;
    var dy = (scrollTop() + LoadBar_Top + LoadBar_hide_down_y_increase - LoadBar_Div.offsetTop) * LoadBar_Hide_downDelta;
    dy = (dy > 0 ? 1 :  - 1) * Math.ceil(Math.abs(dy));
    LoadBar_Div.style.top = LoadBar_Div.offsetTop + dy;
        if(dy <= 0)
        {
        hide_upturn = true;
        }

}

if(hide_upturn == true)
{
        //意犹未尽 ~~ 还要移动一下先 到屏幕最中央再给你看  //上面的因为开始执行国move函数 所以有最新滚动条坐标
        if (LoadBar_Div.offsetTop != (scrollTop() + LoadBar_Top) && hide_upturnnow != true) {
    var dy = (scrollTop() + LoadBar_Top - LoadBar_Div.offsetTop) * LoadBar_Delta;
    dy = (dy > 0 ? 1 :  - 1) * Math.ceil(Math.abs(dy));
    LoadBar_Div.style.top = LoadBar_Div.offsetTop + dy;
        
        if(LoadBar_Div.offsetTop == (scrollTop() + LoadBar_Top)){hide_upturnnow = true;}
        
          }else{
    
        var dy = (scrollTop()  - LoadBar_Div.offsetTop) * LoadBar_Hide_upDelta;
    dy =  Math.ceil(Math.abs(dy));
    LoadBar_Div.style.top = LoadBar_Div.offsetTop - dy;
        LoadBar_Div.filters.alpha.opacity = LoadBar_Div.filters.alpha.opacity-2;
        if(LoadBar_Div.filters.alpha.opacity <= 0)
        {
        clearInterval(IV_LoadBar_Hide);
        LoadBar_Div.style.display = "none";
        }
        }

}

}

//-------------------------------------------------------||


//+(放置Interval)+---------------------------------------||
function LoadBar_SetIV(start){
if(start == "before onload"){

IV_LoadBar_move = setInterval("LoadBar_move()",20);
IV_LoadBar_breath = setInterval("LoadBar_breath()",20);
}
else if (start == "after onload")
{
clearInterval(IV_LoadBar_move);
clearInterval(IV_LoadBar_breath);
IV_LoadBar_Hide = setInterval("LoadBar_Hide()",15);
}
}
//-------------------------------------------------------||

//+(出来吧~^^)+------------------------------------------||
function LoadBar_Start(){
LoadBar_writebar();
LoadBar_setvalue();
LoadBar_SetIV("before onload");
}
//-------------------------------------------------------||


//+(该走了~^^)+------------------------------------------||
function LoadBar_End(){
LoadBar_SetIV("after onload");
}
//-------------------------------------------------------||

//+(初始化 ~^^)+------------------------------------------||
LoadBar_Start();//Start~~~
//匿名函数 解决onload只能加函数名的问题
window.attachEvent('onload',LoadBar_End);
//-------------------------------------------------------||

//¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
//请保留版权 这样我会很happy的 ^^ 3Q!~!^^ 留个我的站点地址备份吧~~常来哦~~
//{ :: + 许诺 | SnoW + ::}
//http://www.xunuo.com
//:: 找我玩魔兽? ::
//:: QQ:49054026 ::
//¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤
</script>

<body>
<table cellpadding="0" cellspacing="1" border="0" bgcolor="#FFFFFF" align="center">
<tr align='center'><td align="center" valign="top"><img src="images/smilies/bm30.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm30');"></td>
<td align="center" valign="top"><img src="images/smilies/bm29.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm29');"></td>
<td align="center" valign="top"><img src="images/smilies/bm28.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm28');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm27.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm27');"></td>
<td align="center" valign="top"><img src="images/smilies/bm26.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm26');"></td>
<td align="center" valign="top"><img src="images/smilies/bm25.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm25');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm24.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm24');"></td>
<td align="center" valign="top"><img src="images/smilies/bm23.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm23');"></td>
<td align="center" valign="top"><img src="images/smilies/bm22.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm22');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm21.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm21');"></td>
<td align="center" valign="top"><img src="images/smilies/bm20.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm20');"></td>
<td align="center" valign="top"><img src="images/smilies/bm19.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm19');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm18.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm18');"></td>
<td align="center" valign="top"><img src="images/smilies/bm17.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm17');"></td>
<td align="center" valign="top"><img src="images/smilies/bm16.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm16');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm15.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm15');"></td>
<td align="center" valign="top"><img src="images/smilies/bm14.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm14');"></td>
<td align="center" valign="top"><img src="images/smilies/bm13.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm13');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm12.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm12');"></td>
<td align="center" valign="top"><img src="images/smilies/bm11.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm11');"></td>
<td align="center" valign="top"><img src="images/smilies/bm10.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm10');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm09.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm09');"></td>
<td align="center" valign="top"><img src="images/smilies/bm08.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm08');"></td>
<td align="center" valign="top"><img src="images/smilies/bm07.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm07');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm06.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm06');"></td>
<td align="center" valign="top"><img src="images/smilies/bm05.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm05');"></td>
<td align="center" valign="top"><img src="images/smilies/bm04.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm04');"></td>
</tr><tr><td align="center" valign="top"><img src="images/smilies/bm03.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm03');"></td>
<td align="center" valign="top"><img src="images/smilies/bm02.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm02');"></td>
<td align="center" valign="top"><img src="images/smilies/bm01.gif" border="0" onmouseover="this.style.cursor='hand';" onclick="AddText(':bm01');"></td>
</tr><tr></tr>
</table>
</body>
     
    #1 srsman, 2006-06-05
  2. Hoofei

    Hoofei New Member

    注册:
    2005-12-10
    帖子:
    3,162
    赞:
    35
    给个演示?
     
    #2 Hoofei, 2006-06-05
  3. oicq我爱玩

    oicq我爱玩 New Member

    注册:
    2006-01-27
    帖子:
    5,205
    赞:
    28
    演示给个方便些~
     
    #3 oicq我爱玩, 2006-06-11
  4. wjq222

    wjq222 New Member

    注册:
    2006-06-13
    帖子:
    1
    赞:
    0
    看不懂呀;) :sweat:
     
    #4 wjq222, 2006-06-13
  5. comic

    comic New Member

    注册:
    2006-03-05
    帖子:
    302
    赞:
    2
    也是个好东西~收了
     
    #5 comic, 2006-06-18
(您必须注册并登陆后发新主题。)
Toggle Width
语言
简体中文