关于CSS切换滤镜 制作幻灯片的原理 代码如下

html-css024

关于CSS切换滤镜 制作幻灯片的原理 代码如下,第1张

我试了下你的代码。

js部分略微修改了一下。

就是filters前面加上x1.

然后,为什么加在div而不是加在img上,原因是这个滤镜是对div做的,效果是div的

如果你要对图片做。意义不大。因为你调用了滤镜,动作完成之后还是那张图片。

x1.filters[0].apply() 引用滤镜

x1.filters[0].Enabled = 1

snh(n1)--这一步就是更换图片了。 也就是说,div在更换图片之后才会启用滤镜效果。

x1.filters[0].play()}} 播放滤镜

然后我四张图片都能显示。你不能显示的,看下图片有没有问题

下面代码放在网页head区域,两行一行是进入网页、一行是离开时:

<meta http-equiv="page-enter" content="revealtrans(duration=3,transition=23)">

<meta http-equiv="page-exit" content="revealtrans(duration=3,transition=23)">

duration=3 是设置效果时间为3秒

transition = 23 是切换效果

--------------------------------------------------

矩形从大至小 0 随机溶解12

矩形从小至大 1从上下向中间展开 13

圆形从大至小 2从中间向上下展开 14

圆形从小至大 3从两边向中间展开 15

向上推开 4从中间向两边展开 16

向下推开 5从右上向左下展开 17

向右推开 6从右下向左上展开 18

向左推开 7从左上向右下展开 19

垂直形百叶窗 8从左下向右上展开 20

水平形百叶窗 9 随机水平细纹21

水平棋盘 10 随机垂直细纹22

垂直棋盘 11随机选取一种特效 23

revealTrans是css中图片切换的动态滤镜啊它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。

两个参数Transition和Duration,分别是变换效果和持续时间,其中Duration是浮点数。

此外还有两个属性Enabled和Percent分别是是否激活滤镜和当前静态滤镜输出在转换进程中所处的点。

设置完后还需要运行apply和play方法,分别是应用变换效果和运行效果