首页 >> 技术文章 >> 详细内容
制作网页转换时的过渡效果的方法

当我们点击网页上的链接时,浏览器页面就会转到链接指向的新的页面,我们想在页面转换时加上过渡效果。
打开这个页面的原代码,在<head>与</head>插入代码:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">
这样这个过渡效果就完成了,很简单吧。现在我们来测试一下效果如何,打开这个页面,然后点击页面上的链接,页面在转到下一个页面的过程中,我们看到页面是从上到下慢慢的转换到第二个页面的。
我们现在再试一个效果,将那段代码换成:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=1,Transition=14)">
我们看到页面是从中间向左右两端展开过渡的,而且速度上快了一点。原因在于Duration和Transition的值不同。
Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表:
0 盒状收缩 1 盒状放射
2 圆形收缩 3 圆形放射
4 由下往上 5 由上往下
6 从左至右 7 从右至左
8 垂直百叶窗 9 水平百叶窗
10 水平格状百叶窗 11垂直格状百叶窗
12 随意溶解 13从左右两端向中间展开
14从中间向左右两端展开 15从上下两端向中间展开
16从中间向上下两端展开 17 从右上角向左下角展开
18 从右下角向左上角展开 19 从左上角向右下角展开
20 从左下角向右上角展开 21 水平线状展开
22 垂直线状展开 23 随机产生一种过渡方式
当Transition为23时,会随机产生0到22中的一个过渡效果。例如:
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=23)">
除了上面两个参数,还有一个http-equiv:
http-equiv="Page-Exit"的意思是指页面离开时产生效果。
它有一种写法,如:
http-equiv="Page-Enter"则是指页面进入时产生的效果。
好了,现在大家自己测试一下效果吧。

南京服务器托管 | 南京服务器租用 | 南京网站建设 | 南京企业建站 | 南京服务器代维 | 虚拟主机 | 顶级域名 | 网站优化 | 网站推广 | 南京中绘谷网络数据中心467.cn
| 整理发布 | TEL:13913852884,025-58633651,QQ:21390019 

发布者:admin 发布时间:2012/2/9 阅读:3020

Baidu
Copyright © 2002-2021 467.Cn All rights reserved    南京华昊网络技术有限公司    版权所有
备案序号:苏ICP备13052121号    ISP经营许可证:苏B2-20080166    ICP/SP经营许可证:苏B2-20130350      苏公网安备 32011102010099号
地址:南京市江北新区大桥北路77号电信大楼5楼    电话:025-58633651(8线)  13913852884  传真:025-58497310    E-mail:467cn@163.com    邮编:210032
网址:Www.467.Cn    QQ在线支持:点击这里给我发消息 点击这里给我发消息