网页图片实现百叶窗效果

 

网页图片实现百叶窗效果


制作 或者观看过幻灯片的网友,一定不会对幻灯片的切换效果感到陌生,垂直百叶窗式、纵向棋盘式等切换效果是否让你还记忆犹新呢?其实我们也可以把网页中的图片做出这种效果。
  预想效果:几张图片轮流显示,图片切换时会出现垂直百叶窗式等效果,刷新后的切换效果不同。
  实现代码如下:
  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比较特别,是随机效果,程序默认就是随机效果。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章