如何實現虎摘軍事網的圖文調用頁面切換特效效果？

2024-09-10 21:54:25

字體：大中小

來源：轉載

供稿：網友

問題：這是虎摘軍事網的圖文調用頁面特效十分漂亮，哪位大哥能夠用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");