一种比较酷的页面载入特效代码

比较|特效|页面

  在<head></head>区域中加入以下代码
<script src="js/loadbar.js" type="text/javascript"></script>

  loadbar.js代码如下
function loadBar(fl)
//fl is show/hide flag
{
  var x,y;
  if (self.innerHeight)
  {// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
  }
  else
  if (document.documentElement && document.documentElement.clientHeight)
  {// Explorer 6 Strict Mode
   x = document.documentElement.clientWidth;
   y = document.documentElement.clientHeight;
  }
  else
  if (document.body)
  {// other Explorers
   x = document.body.clientWidth;
   y = document.body.clientHeight;
  }

    var el=document.getElementById('loader');
        if(null!=el)
        {
                var top = (y/2) - 50;
                var left = (x/2) - 150;
                if( left<=0 ) left = 10;
                el.style.visibility = (fl==1)?'visible':'hidden';
                el.style.display = (fl==1)?'block':'none';
                el.style.left = left + "px"
                el.style.top = top + "px";
                el.style.zIndex = 2;
        }
}

  在<body></body>区域中加入以下代码
<body >
<div id="loader">
<table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0">
<tbody><tr>
 <td align="left" bgcolor="#ffffff">
 <p><img style="MARGIN: 3px" height="32" alt="数据载入中..." src="http://www.webjx.com/htmldata/2005-12-04/images/wait.gif" width="32" align="left" /><strong>数据载入中...</strong><br />
 <span>正在载入页面, 请稍候...</span></p></td></tr>
</tbody></table>
</div>
<script language="JavaScript" type="text/javascript">loadBar(1);</script>
  附上wait.gif图片....

<head><script type="text/javascript">function loadBar(fl)//fl is show/hide flag{ var x,y; if (self.innerHeight) {// all except Explorer x = self.innerWidth; y = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) {// Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight; } else if (document.body) {// other Explorers x = document.body.clientWidth; y = document.body.clientHeight; } var el=document.getElementById('loader'); if(null!=el) { var top = (y/2) - 50; var left = (x/2) - 150; if( left<=0 ) left = 10; el.style.visibility = (fl==1)?'visible':'hidden'; el.style.display = (fl==1)?'block':'none'; el.style.left = left + "px" el.style.top = top + "px"; el.style.zIndex = 2; }}</script></head><body><body ><div id="loader"><table class="loader" style="FILTER: Alpha(opacity=75)" cellspacing="1" cellpadding="5" bgcolor="#bbbbb" border="0"><tbody><tr> <td align="left" bgcolor="#ffffff"> <p><img style="MARGIN: 3px" height="32" alt="数据载入中..." src="200777171234284.gif" width="32" align="left" /><strong>数据载入中...</strong><br /> <span>正在载入页面, 请稍候...</span></p></td></tr></tbody></table></div><script language="JavaScript" type="text/javascript">loadBar(1);</script></body>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-07-28 14:02:46

一种比较酷的页面载入特效代码的相关文章

网页设计技巧分享:网页页面光影特效的运用

文章描述:浅谈页面设计中光影的特效. 为了展现页面的主题或者是贴近游戏的氛围,常常会看见游戏的页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效就可以化腐朽为神奇.那么光效究竟是如何具体地影响页面的视觉观感的呢? 1. 丰富页面的层次 当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了. 2. 烘托气氛 光效的颜色.形状和出现的位置会对设计表达的

[全兼容哦]--实用、简洁、炫酷的页面转入效果loing_javascript技巧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

酷拍天下3D特效摄影机带来行业发展新模式

科技与时代都在同步发展的同时,不少行业也跟着在进步,摄影市场从幼稚成长期逐渐过渡到规模发展期,巨大市场空间和利益的诱惑使得残酷的行业竞争在所难免,洗牌再洗牌的中国摄影市场不断演绎着残酷竞争的戏码. 大家都知道酷拍天下 3D 特效摄影机作为特效摄影行业的佼佼者是广州市创硕数码科技有限公司研发.特技特效摄影技术原理是将所拍下的影像通过设备技术软件进行即时合成.只需简单操作,即可自由合成或剪裁影像放置于不同场景中,使用者可藉由数字相机,随时摄取想要的画面人物,将自己的创意,透过数字相机的拍摄,实时得到

Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)_jquery

这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,需要的朋友可以参考下 幻灯片效果描述:与前两节不同的是,这款特效可以打开页面随机选择切换方式(方向)   运行效果截图如下: 具体代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

JS实现页面载入时随机显示图片效果_javascript技巧

本文实例讲述了JS实现页面载入时随机显示图片效果.分享给大家供大家参考,具体如下: <html> <head> <title>JS 随机图片效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- img { b

第二种方法:jsp 页面为多个标签 用for()循环 分别添加多个计时器!在线等!谢谢啦!!

问题描述 第二种方法:jsp 页面为多个标签 用for()循环 分别添加多个计时器!在线等!谢谢啦!! 下面这种写法也有问题,应该怎么改?谢谢啦!! <script type=""text/javascript"" src=""${pageContext.request.contextPath }/js/jquery-1.8.3.js""></script><script type="&

如何判断页面载入完成?

问题描述 我想当页面的内容都完成后执行一个内容请问要如何判断?? 解决方案 解决方案二:关注中.解决方案三:unload()看下.NET页面生成周期解决方案四:<scriptlanguage="javascript">functionLoadFinish(){ alert("加载完毕!");}</script><bodyonload="LoadFinish()">这样解决方案五:请问用JAVASCRIPT的话.

页面载入,输入点定位到textbox

问题描述 页面载入,输入点定位到textbox例如google打开就可以输入 解决方案 解决方案二:用js设置文本框得到光标就可以了解决方案三:txtUserName.Focus();解决方案四:document.getemelentbyid("textboxid").focus()未测试解决方案五:谢谢,解决了解决方案六:在js写一个方法实现就行了!解决方案七:jffffffffffffffffffffffffffffffffffffff

酷拍天下3D特效摄影机创业加盟新选择

20世纪,彩色胶卷的出现,使一批彩扩店投资者迅速致富,21世纪,一批批年轻人,凭借其聪明的头脑,对市场敏锐的洞察力,以微薄的资金及时投身于数码产业,创造了一个又一个财富神话.今天,酷拍天下3D特效摄影机正与一批志同道合的加盟者共享数码彩扩.数码快印平民化时代到来的新机遇,续写新的财富篇章. 市场前景 数码输出代替传统冲印己是历史发展的必然趋势.在今后数年内,中国数码彩扩市场及数码彩扩行业的发展速度,将保持100%的增长率,一个年产值达数十亿元的巨大市场己经摆在了我们的面前.目前,利用数码输出进行