网页渐变效果

2009/10/11 Add 63 comments |

　　用IE进出小博时有种渐变效果，这两天连续有同学问到这个问题，我就顺便介绍一下，免得我每次都要贴代码解释，虽然我很喜欢解释，我喜欢别人从我这里获得满足感。

　　在meta标签里用 blendTrans 和 RevealTrans 这两种滤镜可以产生渐变效果。滤镜嘛，IE专用，所以其他浏览器现在都可以回家吃饭去了。把下面其中一段代码放到网页的<body>和</body>之间，WordPress的话放 header.php 就好:

No.1

<meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.2)"></meta>

<meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.2)"> </meta>

No.2

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

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

　　其中，Page-Enter和Page-Exit分别表示进入和离开网页。用No.2的同学把x和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种随机选择一种

　　我比较低调，所以用的是No.1 感兴趣的同学可以回去自己试试No.2的效果。

PS：

　　今天把顶部的面板去掉了，原因是我觉得它有些影响整体的美观。呃，和功能相比，我更加重视外观。而且貌似除了我之外，几乎没人会用到那个地方。

　　去掉面板之后把订阅按钮安排在了导航栏的右侧，正宗的E7的订阅图标位置，呵呵。没订阅的同学可以顺便点点

PS1：

　　最近增加了两个页面，不知道有同学发现没有，Joke 和 Video。

　　Joke，其实是安装的另外一个WordPress，新的模板，用来收集一些好玩儿的文字，成人内容居多，小朋友请自行绕道。

　　Video，是我的视频收集页面，一些只看一遍觉得不过瘾的视频。

PS2：

　　应该也同学有这样的感受，时不时会有人来问“你这里、这里和这里怎么实现的啊”之类的问题。我是一个小小菜鸟，不懂什么php、js，甚至连css、html都没真正学过。可恨的是，我对别人的新奇功能还特别感兴趣，这时我会首先翻翻他的文章，看看有没有相关的介绍教程，或者查看下他js、css，找点相关线索，实在没办法才会请教。

　　从上篇文章列出我的使用的插件后，加上我陆陆续续介绍过的功能，现在我的博客已经没有秘密了。另外如果你对这个主题的功能感兴趣的话，请参考iNove，如果你喜欢它的外观的话，请移步E7