如何实现虎摘军事网的图文调用页面切换特效效果?_动易Cms教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!

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

解决:根本不需要用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、在<body>中添加定义“onload="playPage()"”,如:<body onload="playPage()" leftmargin=0 topmargin=0 onmousemove='HideMenu()'>。
  2、在需要显示切换特效的地方添加以下代码
<div id='page1' onmouseover='setbFlag(false)' onmouseout='setbFlag(true)' style='VISIBILITY: visible' class='clsImg' >
<div class='clsImgList'>切换内容一</div>
</div>
<div id='page2' onmouseover='setbFlag(false)' onmouseout='setbFlag(true)' style='VISIBILITY: hidden' class='clsImg'>
<div class='clsImgList'>切换内容二</div>
</div>
<script language="javascript">
<!--
var tmpDiv1 = document.getElementById("page1");
var tmpDiv2 = document.getElementById("page2");

var bFlag = true;
var bShowDiv = true;

function playPage()
{
if(bFlag)
{
if(bShowDiv)
{
nextPage(tmpDiv1, true);
nextPage(tmpDiv2, false);
}
else
{
nextPage(tmpDiv1, false);
nextPage(tmpDiv2, true);
}
setTimeout('playPage()',5000);
}
else
{
setTimeout('playPage()',1000);
}
bShowDiv = !bShowDiv;
return;
}
function setbFlag(b)
{
bFlag = b;
return;
}

查看更多 动易Cms教程  动易Cms模板

共4页上一页1234下一页
来源:模板无忧//所属分类:动易Cms教程/更新时间:2006-08-13
相关动易Cms教程