注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

人生就像一次旅行,不必在乎目的地,在乎的是沿途的风景以及看风景的心情!

 
 
 

日志

 
 

如何制作网页的Loading效果  

2009-04-12 12:01:41|  分类: flash |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

 

  如何制作网页的Loading效果 - 水中天 - xuyuehui的博客如何制作网页的Loading效果

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客解决思路

现在很多网站都用了 Loading 效果,为网页增色不少。不过,在网页中是不可能实现和 Flash 一样的真正的 Loading 效果的,只能模拟或者用近似的方法实现。

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客具体步骤:

■ 方法一:最简单是做一个加载页,然后在里面插入一个隐藏的iframe,iframe内所加载的地址就是Loading的目标网址,在页面加载完后直接转到目标网址。

代码示例:

<script>

var url="http://www.flash8.net"    //要加载的目标页

var text="Loading......"           //加载时显示的文字

function window.onload(){

location=url                            //网页加载后转到目标页

//用iframe预载目标页

document.write(text+"<iframe src=\""+url+"\" style=\"display:none\"></iframe>") 

</script>

技巧:可将变量 url 的值 http://www.flash8.net 改为你的页面地址。

■ 方法二:也可以直接显示一个加载页面,无任何预载动作。

代码示例:

<div id=demo>Loading...</div>

<script>

var url="http://www.flash8.net"        //要加载的目标页

//每500毫秒在id为demo的元素内的文字添加一个 ■

setInterval("demo.innerText+=’■’",500)   

setTimeout("location=url",5000)        //5000毫秒后转到目标地址

</script>

注意:代码中的 demo 为对象自定义 ID,你可以自行定义,但脚本中的demo必须跟对象的ID一致。

提示:500 为每增加一个“■”相隔的毫秒数,5000 指定5000毫秒(即5秒)后转到目标地址。

■ 方法三:从方法二中加一个颜色渐变的效果。

<div id=demo style="color:#494949">Loading...</div>

<script>

var i=69

var url="http://www.flash8.net"       //要加载的目标页

function load(){

if(i<249){

   i+=10

   demo.innerText+="■"       //每500毫秒在id为demo的元素内的文字添加一个 ■

       //设置id为demo的元素的文字颜色向白色渐变

   demo.style.color="rgb("+[i,i,i].join(",")+")" 

   setTimeout("load()",500) //500毫秒后再次执行load()函数

 }

else setTimeout("location=url",1000)   //1秒后转到目标页

}

load() //运行 load 函数

</script>

■ 方法四:先设置文档为不可见,通过定时自加,不断改变状态栏的显示,以模拟下载进度效果,在页面加载完成后,重新设置定时器和变量num,使之更真实,在变量num自加到100后让文档显示并在状态栏显示"complete"。

代码示例:

<script> 

//变量num相当于下载百分比,delay的值为改变状态栏信息的毫秒数

var num=0,delay=300  

function window.onload(){       //页面加载完成后执行以下表达式

  num   = 90                    //在页面加载完成不管num已自加到多少

  delay = 5

function loadState(){ 

  if(num < 100){               //变量num小于100

    num++                      //num自加

    //状态栏显示num的相关字符

    window.status = "loaded:"+num+"% "+new Array(num).join("|")

    //delay毫秒后再次执行loadState()函数

    setTimeout("loadState()",delay)  

  } 

  else {                      //如果num等于100,即认为页面加载完成

    window.status = "complete" //状态栏显示"complete" 

    with(document.body){        //用blendTrans滤镜渐显文档

    filters.blendTrans.apply()      

    style.display = "" 

    filters.blendTrans.play()

    }

  } 

loadState() 

</script>

<body style="display:none;filter:blendTrans(duration=1)">

特别提示

四种方法都没有实现真正的 Loading,只是模拟一个下载进度,到“进度”为100%时再跳转到目标页,或者先用 iframe 预载,加载完成后转到目标页。代码可以直接运行,效果分别如图 3.4、3.5、3.6、3.7 所示。

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客

图 3.4 方法一的Loadign效果预览

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客

图 3.5 方法二的Loadign效果预览

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客

图 3.6 方法三的Loadign效果预览

如何制作网页的Loading效果 - 水中天 - xuyuehui的博客

图 3.7 方法四的Loadign效果预览

特别说明

本例中使用了对象的 innerText 属性来设置或获取对象内的文本内容,location 对象的默认属性 href 来跳转页面,window. 对象的status 属性来设置或获取页面状态栏的文本内容,style 对象的 color 属性来设置对象内的文本颜色,setInterval 和setTimeout 方法来设置计时器。Object.innerText设置或获取位于对象起始和结束标签内的文本。

1.      location.href设置或获取整个 URL 为字符串,location 的默认属性为 href,所以可简写为location。

2.      window.status设置或获取位于窗口底部状态栏的信息。

3.      Object.style.color设置或获取对象文本的颜色。

4.      有关setInterval 和 setTimeout 的说明和区别请参考本部分问题26。

  评论这张
 
阅读(188)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017