网页图片实现百叶窗效果

网页图片实现百叶窗效果

制作

或者观看过幻灯片的网友，一定不会对幻灯片的切换效果感到陌生，垂直百叶窗式、纵向棋盘式等切换效果是否让你还记忆犹新呢？其实我们也可以把网页中的图片做出这种效果。

　　预想效果：几张图片轮流显示，图片切换时会出现垂直百叶窗式等效果，刷新后的切换效果不同。

　　实现代码如下：

　　1.把以下代码放在＜head＞与＜/head＞之间。

　　＜SCRIPT language=javascript＞

　　isns = navigator.appName == "Netscape";

　　img1=new Image()

　　img2=new Image()

　　img3=new Image()

　　img4=new Image()

　　img1.src='存放目录/图片1.jpg'

　　img2.src='存放目录/图片2.jpg'

　　img3.src='存放目录/图片3.jpg'

　　img4.src='存放目录/图片4.jpg'

　　nn=1

　　function change_img()

　　{

　　eval('document.pic.src=img'+nn+'.src');

　　nn++;

　　if(nn>4) nn=1

　　if(!isns)

　　{

　　pic.filters.item(0).apply()

　　pic.style.visibility='visible'

　　pic.filters.item(0).play()

　　setTimeout("pic.style.visibility='hidden'",4000);

　　}

　　else

　　document.pic.visibility='visible'

　　tt=setTimeout('change_img()',4000)

　　}

　　＜/SCRIPT＞

　　2.将需要加载的程序放在＜body ****＞正文中，如＜body onload=change_img();＞。

　　3.找到安放图片的位置，然后插入以下代码：

　　＜IMG height=158 width=130 name=pic style="FILTER: revealtrans(duration=2.0,transition=28);"＞

　　注：这个特效程序不支持Netscape浏览器。其中第三步中的height和width是图片的实际高和宽。另外，你可以自主更改transition的值，并且会得到很多意想不到的效。

说明:

RevealTrans

　　CSS的RevealTrans动态滤镜是一个神奇的滤镜，它能产生23种动态效果，更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。

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

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

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

　　下面列出所有效果和对应Transition值（参考手册）：

　　值 : 效果

　　0 : 矩形收缩转换。

　　1 : 矩形扩张转换。

　　2 : 圆形收缩转换。

　　3 : 圆形扩张转换。

　　4 : 向上擦除。

　　5 : 向下擦除。

　　6 : 向右擦除。

　　7 : 向左擦除。

　　8 : 纵向百叶窗转换。

　　9 : 横向百叶窗转换。

　　10 : 国际象棋棋盘横向转换。

　　11 : 国际象棋棋盘纵向转换。

　　12 : 随机杂点干扰转换。

　　13 : 左右关门效果转换。

　　14 : 左右开门效果转换。

　　15 : 上下关门效果转换。

　　16 : 上下开门效果转换。

　　17 : 从右上角到左下角的锯齿边覆盖效果转换。

　　18 : 从右下角到左上角的锯齿边覆盖效果转换。

　　19 : 从左上角到右下角的锯齿边覆盖效果转换。

　　20 : 从左下角到右上角的锯齿边覆盖效果转换。

　　21 : 随机横线条转换。

　　22 : 随机竖线条转换。

　　23 : 随机使用上面可能的值转换。

　　其中23比较特别，是随机效果，程序默认就是随机效果。