网页渐变效果

2009/10/11 Add 59 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  :razz:

  当然了,有问题还可以随时问我,只要我知道的,保证也会让你知道。话说,我喜欢别人从我这里获得满足感。


呃,其实这篇文章好水。

Posted by whisperer | in Skills | 766 views | Tags: , , , | Twit it !
  1. 10. 13th, 2009 at 21:00 | #1

    @Konecy
    那就好~ :smile:

  2. 10. 15th, 2009 at 20:35 | #2

    嘎嘎 用上渐变效果了 谢谢分享!~ ;-)

  3. 10. 16th, 2009 at 02:13 | #3

    挺好玩,就是严重影响速度。

  4. 10. 17th, 2009 at 00:09 | #4

    @我不在乎
    有严重影响么,无所谓吧,我不在乎 。。

  5. 02. 10th, 2010 at 12:43 | #5

    这里东西好多,不好找啊

  6. 03. 16th, 2010 at 16:29 | #6

    怎么看不到效果

  7. 04. 14th, 2010 at 13:51 | #7

    本来想试试 但是前提是只在ie下工作 算了

  8. 04. 16th, 2010 at 21:01 | #8


    :!:

Comment pages
  1. 10. 30th, 2009 at 14:47 | #1