|
问题：这是虎摘军事网的图文调用页面特效十分漂亮，哪位大哥能够用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;
}
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>
附二：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 随机任意的上述一种效果
以上显示图片文章内容的切换效果和显示文章列表内容的切换效果都已经过测试。
|
导航： 
