Sep 17

页面切换、加载效果 晴

蒙巴 , 18:12 , 后仓房 » 网站建设 , 评论(1) , 引用(0) , 阅读(3981) , Via 本站原创 | |
回答zzpp朋友的问题,加篇日志。共分两部分。

一、页面切换效果
<meta http-equiv="Page-Enter" content="RevealTrans(duration=**,Transitionv=**)">

duration=时间
Transitionv=方式
Page-Enter
说明:
duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输入3便可;transition为切换效果,从1-23共22种不同的切换效果,其中23为随机效果。

效果  Content  Transitionv
盒状收缩 RevealTrans 0 
盒状展开  RevealTrans 1
圆形收缩  RevealTrans 2 
圆形展开 RevealTrans 3
向上擦除 RevealTrans 4
向下擦除 RevealTrans 5
向左擦除 RevealTrans 6
向右擦除 RevealTrans 7
垂直百页窗 RevealTrans 8
水平百页窗 RevealTrans 9
横向棋盘式 RevealTrans 10
纵向棋盘式 RevealTrans 11
溶解 RevealTrans 12
左右向中部收缩 RevealTrans 13
中部向左右展开 RevealTrans 14
上下向中部收缩 RevealTrans 15
中部向上下展开 RevealTrans 16
阶梯状向左下展开 RevealTrans 17
阶梯状向左上展开 RevealTrans 18
阶梯状向右下展开 RevealTrans 19
阶梯状向右上展开 RevealTrans 20
随机水平线 RevealTrans 21
随机垂直线 RevealTrans 22
随机 RevealTrans 23

二、页面加载效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="Jojoo.net">
<script language="javascript">
function setSB(v, el) {
var ie5 = (document.all && document.getElementsByTagName);
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];
filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
}
}
function fakeProgress(v, el) {
if (v > 100)
location.href = "http://www.master163.com";
else {
setSB(v, el);
window.setTimeout("fakeProgress(" + (++v) + ", document.all['" + el.id + "'])", 20);
}
}
</script>
</head>

<body onload="fakeProgress(0, sb)" topmargin=180 bgcolor=#eeeeee>
<center>
<font color=gray> <p align=center style="color: #99000c; font-family: 宋体; font-szie:12px; line-height: 100%">master163.com载入中,请稍侯...</p></font>
<span id=sb style="width: 300px">
<div style="filter: Alpha(Opacity=0, FinishOpacity=60, style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); width: 0%; height: 12px; position: absolute; background: #99000c"></div>
<div style="font-size: 12px; width: 100%; color: #99000c; font-family: arial; text-align: center"></DIV>
</span>

</center>

</body>
</html>




注:本篇第二部分来自网络,本站未经测试。
全部代码下载:
下载文件
这个文件只能在登入之后下载。请先 注册登入
Tags: , ,
zzpp
September 17, 2006 19:51
感谢蒙巴兄的教程,问题已经解决了!!你可以看 我站的效果!具体效果用到了css js调用!!
蒙巴 回复于 September 17, 2006 20:56
看到了,效果不错 :)
分页: 1/1 第一页 1 最后页
发表评论
表情
emotemotemotemot
emotemotemotemot
emotemotemotemot
emotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
   
您也可用OpenID登入: