最近更新加入收藏网站地图

Vista | 软件评测 | 系统备份 | 优化 | 进程 | 聊天 | 病毒 | Linux | 黑客 | 防火墙 | 数据库 | Web开发 | Java | Word | 游戏 | 32位开发 | 移动开发 | QQ专区

当前位置：首页 > 网页制作 > JavaScript技术内容正文：载入Loadbar 另一种很酷的载入效果

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

发布时间：2006-06-18 19:51:56　来源：天极网网友评论 0 条

运行代码：

<style type="text/css"></style><script language="JavaScript">//¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤欢迎下载研究^谢谢¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤// 恭喜你找到地址想必很稀饭这个效果吧 ^^我可是做了很久的哦 ~ 嗯!眼光8错的说~~// 把此函数直接引用在网页中就可以了记得前面要加载它的css样式哦不懂的可以问我的说~~// == Page LoadBar ==//:: Version.0.4//:: Powered by Snow :: @ 2006.4.4//:: QQ:49054026 :://:: Mail:snow@xunuo.com :://¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤//+(长宽兼容性函数)+-------------------------------------------||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>看看效果吧</body></html>

相关文章

无相关信息

【评论】【收藏本文】【打印】【关闭】

上一篇文章：JS页内查找关键词的高亮显示
下一篇文章：一个表单日期输入的JS脚本非常实用

已有 0 位对此新闻感兴趣的网友发表了看法

图文阅读推荐

推荐阅讯: JavaScript高级程序设计：2.6 原始类型; 特效代码：一个非常实用的Javascript类库; 网页特效实例：用js获取单选按钮的数据; 一个表单日期输入的JS脚本非常实用; 飘浮广告的显示脚本类（VBS，JS双版）; 网页特效：一个简单实用的Ajax通用类; 下拉菜单的简单制作; Javascript脚本实现静态网页加密; Javascript的一种模块模式; JavaScript高级程序设计：2.4 保留字

阅读排行: 1.网页特效：一段实用的图片滚动显示代码; 2.网页特效实例：用js获取单选按钮的数据; 3.Javascript特效：随机显示图片的源代码; 4.Javascript技术技巧大全; 5.IE和FireFox下javascript读写XML实现广告轮; 6.用 JavaScript 来操作字符串的函数; 7.添加到收藏夹的Javascript脚本-适合IE和Fir; 8.怎样判断浏览器是否支持javascript?; 9.JavaScript实现网页图片等比例缩放; 10.网页特效：随机显示广告的JS源代码

专题教程: Windows Server-Windows Server文档-Windows Server新闻-Windows Ser PostgreSQL-PostgreSQL文档-PostgreSQL新闻-PostgreSQL专家; WebLogic-WebLogic文档-WebLogic新闻-WebLogic专家 FreeBSD-FreeBSD文档-FreeBSD新闻-FreeBSD专家; Linux-内核 GUI KDE Gnome DNS FTP 安全安装-Linux专区 Windows-AD IIS ServerCore 虚拟化安全 HPC-Windows专区; 大话G游专题：手机病毒揭密; ARP攻击防范与解决方案路由故障处理手册

深度XP 雨林木风XP WinXP下载世界之窗浏览器风行网络电影 ZCOM电子杂志 UUSee网络电视金山毒霸杀毒酷我音乐盒

深度系统雨林木风 Ghost ghost系统盘 XP下载小游戏 flash 股票购物彩票交友非主流汽车健康电影金山词霸