[组图]图文调用页面切换特效效果

作者:雅虎 来源:动易网络 点击数: 发布时间:2007年03月06日

问题:这是虎摘军事网的图文调用页面特效十分漂亮,哪位大哥能够用ASP直接调用数据库来生成?实例请看 。下面是飞扬军事论坛的图文调用特效,像水平线扫描似的刷新出新的图文,实例请看:。

解决:根本不需要用ASP直接调用数据库来生成。

内容切换特效效果的操作步骤:

一、添加CSS样式定义:
  进入后台依次打开“系统设置”->“网站风格管理”,修改网站风格,在里面添加以下的CSS样式定义:
/* 图文调用页面特效定义 */
.clsImg{filter: revealTrans(transition=4,duration=2); width: 750px; position: absolute; margin-top:-62px;}
.clsImgList{width:750px;}
  其中filter: revealTrans(transition=4,duration=2)定义了切换特效的内容,transition表示设置或检索转换所使用的方式(4为向上擦除,有23种切换效果参数见附二),duration表示设置或检索转换完成所用的时间。position: absolute;表示将对象从文档流中拖出。margin-top:-62px表示区块上缩进-62px,用以定位内容。

  这二个CSS可以自定义其内容,在后面的模板中会相继调用。

二、修改版式模板:
  依次打开“系统设置”->“网站通用模板页管理”,修改网站首页模板,在里面添加以下内容:
  1、在中添加定义“onload="playPage()"”,如:。
  2、在需要显示切换特效的地方添加以下代码:


切换内容一


     

例:
  1、显示图片文章内容的切换效果:




  
  2、显示文章列表内容的切换效果:


平面设计最新文章



 

三、保存修改的模板,更新缓存即可看到效果。如果您开启了生成HTML功能则需生成相关页面。

附一:提供一段显示文章列表内容的切换效果完整代码:
 











                                           

       




                                                   
最新图片文章
           

     



平面设计最新文章



     
                       
         

附二:transition设置或检索转换所使用的方式参数列表:
   0 Box in 矩形缩小
   1 Box out 矩形扩大
   2 Circle in 圆形缩小
   3 Circle out 圆形扩大
   4 Wipe up 向上擦除
   5 Wipe down 向下擦除
   6 Wipe right 向右擦除
   7 Wipe left 向左擦除
   8 Vertical blinds 垂直百页
   9 Horizontal blinds 水平百页
   10 Checkerboard across 棋盘状通过
   11 Checkerboard down 棋盘状向下
   12 Random dissolve 随机融化
   13 Split vertical in 垂直向内分开
   14 Split vertical out 垂直向外分开
   15 Split horizontal in 水平向内分开
   16 Split horizontal out 水平向内分开
   17 Strips left down 左下条状
   18 Strips left up 左上条状
   19 Strips right down 右下条状
   20 Strips right up 右上条状
   21 Random bars horizontal 随机的水平栅栏
   22 Random bars vertical 随机的垂直栅栏
   23 Random effect 随机任意的上述一种效果

以上显示图片文章内容的切换效果和显示文章列表内容的切换效果都已经过测试。