凯特猫-博闻天下

互联网,美文,外贸,热点新闻,趣闻轶事

javascript实现类似本站页面加载渐变效果


首先来看效果:

你随便点击本站其它一个链接,可以是文章,顶部链接(不要点“多多搜索”,因为它不属于博客),侧边链接,你就会看到一个渐变的效果。

其次来看做法

如果你喜欢这个特效,那么就来看具体的做法了。做法其实很简单。打开你博客根目录下的head.asp,找到

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

在它后面加上两句话

<META http-equiv=Page-Enter content=blendTrans(Duration=0.5)>

<META http-equiv=Page-Exit content=blendTrans(Duration=0.5)>

保存后上传到你的网站上就好了。

最后来看一下原理

Page-Enter、Page-Exit是页面被载入和调出时的一些特效的根本原理。

用法嘛,其实不仅适用于pjblog,任何网页在头部<head></head>间加入

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

都可以实现像凯特猫-博闻天下中那样的效果




当然还有更多可以用的页面加载,页面退出的特效,javascript提供了丰富的功能

blendTrans是动态滤镜的一种,产生渐隐效果。

另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:

<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">

<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

Duration  表示滤镜特效的持续时间(单位:秒)

Transition 滤镜类型。表示使用哪种特效,取值为0-23。

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

个人认为加

<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">

<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">

这两句就够了,搞的太花哨也不好,可能让用户产生反感情绪哦。要慎重,当然你也可以试用一下。

本文可转载,但请注明转自凯特猫-博闻天下

本文地址:http://www.ketcat.com/blog/article.asp?id=212

« 元宵节经典祝福短信(三)pjblog文章复制自动加版权信息 »

收藏到网摘: 用google书签收藏 用“美味书签”收藏 用yahoo收藏 用新浪vivi收藏 用365key收藏 分享到饭否 收藏到qq网摘 用windows live书签收藏 添加到百度搜藏 收藏到“就喜欢” 用收客收藏 和讯

本月访问之最

本年访问之最

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

控制面板

广告也精彩

最近发表

更多"网络技术"文章

完全随机文章

赞助商链接

热文排行使用

图标汇集

Copyright 2008-2099 Your WebSite. All Rights Reserved.浙ICP备08013176号