copyright©2006-2008 xueol.com 鄂icp备06022161号
★这是虎摘军事网的图文调用页面特效,十分漂亮,哪位大哥能够用asp直接调用数据库来生成??小妹在线等!!
实例请看 http://junshi.huzhai.com/union/147.html
★下面是飞扬军事论坛的图文调用特效,像水平线扫描似的刷新出新的图文
实便请看:http://junshi.huzhai.com/detail.aspx?id=3800
内容切换特效效果的操作步骤：
一、添加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，用以定位内容。
二、修改模板：
依次打开“系统设置”->“网站通用模板页管理”，修改网站首页模板，在里面添加以下内容：
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;
}
function nextpage(whichdiv, bshowdiv){
if(whichdiv != null)
{
//whichdiv.filters.revealtrans.transition=math.floor(math.random()*23);
whichdiv.filters.revealtrans.apply();
if(bshowdiv)
{
whichdiv.style.visibility = 'hidden';
}
else
{
whichdiv.style.visibility = 'visible';
}
whichdiv.filters.revealtrans.play()
}
return;
}
//-->
</script>
例：
1、显示图片文章内容的切换效果：
<div id='page1' onmouseover='setbflag(false)' onmouseout='setbflag(true)' style='visibility: visible' class='clsimg' >
<div class='clsimglist'><!--{$getpicarticle(1,5|6,false,0,5,false,false,0,1,1,130,90,20,0,false,6)}--></div>
</div>
<div id='page2' onmouseover='setbflag(false)' onmouseout='setbflag(true)' style='visibility: hidden' class='clsimg'>
<div class='clsimglist'><!--{$getpicarticle(1,7|8,false,0,5,false,false,0,1,1,130,90,20,0,false,6)}--></div>
</div>
2、显示文章列表内容的切换效果：
<div class='clsimglist'>
<div align="center" style=" background:#ff0000; color:#ffffff;">平面设计最新文章</div>
<!--{$getarticlelist(1,5,true,0,0,18,false,false,"",0,3,2,26,0,false,1,false,false,3,false,false,false,true,true,false,0,3,true,bbb,false)}--></div>
</div>
<div id='page2' onmouseover='setbflag(false)' onmouseout='setbflag(true)' style='visibility: hidden' class='clsimg'>
<div class='clsimglist'>
<div align="center" style=" background:#0000ff; color:#ffffff;">动漫设计最新文章</div>
<!--{$getarticlelist(0,0,false,0,0,18,false,false,"",0,1,2,26,0,false,1,true,false,0,true,false,true,true,false,false,1,3,true,bbb,false)}-->
</div>
</div>
三、保存修改的模板，更新缓存即可看到效果。如果您开启了生成html功能则需生成相关页面。
附：提供一段显示文章列表内容的切换效果完整代码：
<table class=center_tdbgall cellspacing=0 cellpadding=0 border=0>
<tr>
<td class=main_title_760i>
<table style="width: 100%; height: 19px" height=19 cellspacing=0 cellpadding=0 width="100%" border=0>
<tr>
<td width="24%"><a href="#" target=_blank><strong><font color=#ff6600>最新图片文章</font></strong></a></td>
<td width="76%">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120" align=middle class=main_tdbg_760i>
<div id='page1' onmouseover='setbflag(false)' onmouseout='setbflag(true)' style='visibility: visible' class='clsimg' >
<div class='clsimglist'>
<div align="center" style=" background:#ff0000; color:#ffffff;">平面设计最新文章</div>
<!--{$getarticlelist(1,5,true,0,0,18,false,false,"",0,3,2,26,0,false,1,false,false,3,false,false,false,true,true,false,0,3,true,bbb,false)}--></div>
</div>
<div id='page2' onmouseover='setbflag(false)' onmouseout='setbflag(true)' style='visibility: hidden' class='clsimg'>
<div class='clsimglist'>
<div align="center" style=" background:#0000ff; color:#ffffff;">动漫设计最新文章</div>
<!--{$getarticlelist(0,0,false,0,0,18,false,false,"",0,1,2,26,0,false,1,true,false,0,true,false,true,true,false,false,1,3,true,bbb,false)}-->
</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;
}
function nextpage(whichdiv, bshowdiv){
if(whichdiv != null)
{
//whichdiv.filters.revealtrans.transition=math.floor(math.random()*23);
whichdiv.filters.revealtrans.apply();
if(bshowdiv)
{
whichdiv.style.visibility = 'hidden';
}
else
{
whichdiv.style.visibility = 'visible';
}
whichdiv.filters.revealtrans.play()
}
return;
}
//-->
</script>
</td>
</tr>
<tr>
<td class=main_shadow></td>
</tr>
</table>
另：以上显示图片文章内容的切换效果和显示文章列表内容的切换效果都已经过测试，根本不需要用asp直接调用数据库来生成。
文中所显示的效果请参阅动易帮助中心“如何实现虎摘军事网的图文调用页面切换特效效果？”一文：
http://help.powereasy.net/cms/showarticle.asp?articleid=992
根据雅虎的教程俺做了一个图片特效添加的视频教程希望对洛阳的牡丹和需要这个效果的朋友们有所帮助。
http://help.powereasy.net/qihang/qihang2006/eshophelp/1005.html