|
藍森林 http://www.lslnet.com 2006年8月25日 8:28
請教:如何實現文字的定時滾動啊?
具體效果如:http://www.manbu.net 左面的新聞效果! |
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>::漫步 Http://www.manbu.net/::</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<link rel="shortcut icon" href="http://www.manbu.net/images/manbu.ico">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="Scripts/fadeTicker.js" type="text/javascript"></script>
<script type="text/javascript">
function initFadeTicker()
{
popupLoad.style.visibility='hidden' //隱藏提示窗口
se = new fadeTicker();
se.addItem("<span style='color:#6F2BD5' title='漫步計劃推出Sql版統計系統(見內)'>漫步計劃推出Sql版統計系統(見內)</span><br><font color=#cccccc>(2004年4月5日)</font>","# onclick=window.open('News/File/Show.asp?News_Id=3','','height=400,width=500,resizable=yes,scrollbars=yes')");
se.addItem("<span style='color:#1A94E6' title='網站現有欄目'>網站現在還很簡陋,目前只有論壇這個欄目,其他欄目會慢慢製作完成,希望大家能繼續支持!謝謝!:)</span><br><font color=#cccccc>(2004年3月20日)</font>","#");
se.addItem("<span style='color:#FF6600' title='改版完成'>網站改版完成,希望大家喜歡還請大家繼續支持漫步:)謝謝!</span><br><font color=#cccccc>(2004年3月19日)</font>","#");
se.init(
2, // set the speed
4, // set the delay (how long each message is viewable) (seconds)
'' // set the target (optional)
);
}
onload = initFadeTicker
</script>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<div name="loadpop" id="popupLoad" class="divcenter">
<table width="200" border="0" cellspacing="0" cellpadding="5" class=popload>
<tr>
<td class=body align=center><b>正在讀取頁面內容.<br>請等待...</b></td>
</tr>
</table>
</div>
<TABLE WIDTH=778 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD COLSPAN=2> <IMG SRC="images/ManbuPages_bak_1.gif" ALT="" WIDTH=778 HEIGHT=58 border="0" usemap="#Map"></TD>
</TR>
<TR>
<TD COLSPAN=2> <IMG SRC="images/ManbuPages_bak_2.gif" WIDTH=778 HEIGHT=48 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=2> <IMG SRC="images/ManbuPages_bak_3.gif" WIDTH=778 HEIGHT=21 ALT=""></TD>
</TR>
</TABLE>
<TABLE WIDTH=778 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="196" align="center" valign="top" bgcolor="#FFFFFF"><TABLE WIDTH=196 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD height="40"> <IMG SRC="images/ManbuPages_bak_4.gif" WIDTH=196 HEIGHT=40 ALT=""></TD>
</TR>
<TR>
<TD height="113" align="center" background="images/ManbuPages_bak_6.gif"><table width="83%" height="113" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style='float:left;width:100%'> <div id='tickBox'> <div id='tickCont'></div> </div></div>
</td>
</tr>
</table></TD>
</TR>
<TR>
<TD height="6"> <IMG SRC="images/ManbuPages_bak_7.gif" WIDTH=196 HEIGHT=6 ALT=""></TD>
</TR>
<TR>
<TD height="45"> <IMG SRC="images/ManbuPages_bak_8.gif" WIDTH=196 HEIGHT=45 ALT=""></TD>
</TR>
<TR>
<TD height="91" align="center" bgcolor="#FFFFFF">
<table width="85%" border="0" cellspacing="0" cellpadding="4">
<form name="form1" method="post" action="">
<tr>
<td width="44%"><img src="images/use.gif" width="63" height="23"></td>
<td width="56%"><input name="textfield" type="text" class="sInput" size="12"></td>
</tr>
<tr>
<td><img src="images/pass.gif" width="63" height="23"></td>
<td><input name="textfield2" type="password" class="sInput" size="12"></td>
</tr>
<tr align="center">
<td height="29" colspan="2"><input name="Reg" type="button" class="button" id="Reg" value="註冊">
<input name="Submit" type="submit" class="button" id="Submit" value="登陸"></td>
</tr>
</form>
</table></TD>
</TR>
<TR>
<TD height="11"> <IMG SRC="images/ManbuPages_bak_10.gif" WIDTH=196 HEIGHT=11 ALT=""></TD>
</TR>
<TR>
<TD align="center" valign="top" bgcolor="#FFFFFF">
<table width="85%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="190"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="190" height="190">
<param name="movie" value="ballot.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<!--隱藏flash的右鍵菜單-->
<param name="wmode" value="transparent">
<!-設置flash為透明底-->
<embed src="ballot.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="190"></embed>
</object></td>
</tr>
</table></TD>
</TR>
</TABLE></TD>
<TD width="582" height="300" align="center" valign="top" bgcolor="#FFFFFF"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="1" background="images/free_line_bg.gif" ><img src="images/free_line_bg.gif"></td>
</tr>
</table>
<table width="95%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="24%" height="12"></td>
<td width="76%"></td>
</tr>
<tr>
<td><img src="images/Bz.gif" hspace="10" border="1"></td>
<td valign="top"><p><strong>漫步的標誌</strong></p>
<p>漫步的第一個標誌,希望能為漫步的發展打開一個好的開端,一年來磕磕碰碰走到今天,雖然一切看起來還是那麼的幼稚,但是有那麼多漫步的朋友支持者,相信會越來越好。您的支持是漫步發展的唯一動力。</p>
<p>一年一晃眼就過去了,彷彿昨天,今天的漫步在大家的扶持下繼續前進,明天,希望漫步能像剛出生的太陽一樣蒸蒸日上。</p></td>
</tr>
<tr>
<td height="12"></td>
<td valign="top"></td>
</tr>
</table>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="3"></td>
</tr>
<tr>
<td height="1" background="images/free_line_bg.gif" ><img src="images/free_line_bg.gif"></td>
</tr>
</table>
<table width="95%" border="0" cellpadding="7" cellspacing="0">
<tr bgcolor="E2E4E7">
<td width="70%"><strong><img src="images/xia.gif" width="9" height="7" align="absmiddle"> 論壇新貼</strong></td>
<td width="30%" bgcolor="E2E4E7"><strong><img src="images/n1.gif" width="16" height="12" align="baseline"> 社區版塊</strong></td>
</tr>
</table>
<table width="95%" height="100%" border="0" cellpadding="1" cellspacing="0">
<tr>
<td width="70%" valign="top"><script language=javascript src=http://bbs.manbu.net/other/Article/topic.asp?BoardID=&Number=16&StrLen=50&NewWindow=yes></script><br><br></td>
<td width="30%" valign="top" background="images/RightBG.gif"><script language=javascript src=http://bbs.manbu.net/ForumNav.asp></script></td>
</tr>
</table></TD>
</TR>
</TABLE>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="1" background="images/free_line_bg.gif" ><img src="images/free_line_bg.gif"></td>
</tr>
<tr>
<td bgcolor="#f7f7f7"><table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center">© 2003-2005 ManBu.net,all rights reserved <script src="/count/count.asp"></script></td>
</tr>
</table></td>
</tr>
</table>
<map name="Map">
<area shape="rect" coords="458,37,534,59" href="#">
<area shape="rect" coords="535,37,612,59" href="#">
<area shape="rect" coords="613,37,690,59" href="http://bbs.manbu.net">
<area shape="rect" coords="691,37,768,59" href="mailto:NeoWing@163.com">
</map>
</BODY>
</HTML>
[/html]
參考別人網站的時候要多看它的源代碼。
<script src="Scripts/fadeTicker.js" type="text/javascript"></script>這是實現那個滾動功能的JS文件;
<script type="text/javascript">
function initFadeTicker()
{
popupLoad.style.visibility='hidden' //隱藏提示窗口
se = new fadeTicker();
se.addItem("<span style='color:#6F2BD5' title='漫步計劃推出Sql版統計系統(見內)'>漫步計劃推出Sql版統計系統(見內)</span><br><font color=#cccccc>(2004年4月5日)</font>","# onclick=window.open('News/File/Show.asp?News_Id=3','','height=400,width=500,resizable=yes,scrollbars=yes')");
se.addItem("<span style='color:#1A94E6' title='網站現有欄目'>網站現在還很簡陋,目前只有論壇這個欄目,其他欄目會慢慢製作完成,希望大家能繼續支持!謝謝!:)</span><br><font color=#cccccc>(2004年3月20日)</font>","#");
se.addItem("<span style='color:#FF6600' title='改版完成'>網站改版完成,希望大家喜歡還請大家繼續支持漫步:)謝謝!</span><br><font color=#cccccc>(2004年3月19日)</font>","#");
se.init(
2, // set the speed
4, // set the delay (how long each message is viewable) (seconds)
'' // set the target (optional)
);
}
onload = initFadeTicker
</script>定義了一個函數;
<TABLE WIDTH=778 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD width="196" align="center" valign="top" bgcolor="#FFFFFF"><TABLE WIDTH=196 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD height="40"> <IMG SRC="images/ManbuPages_bak_4.gif" WIDTH=196 HEIGHT=40 ALT=""></TD>
</TR>
<TR>
<TD height="113" align="center" background="images/ManbuPages_bak_6.gif"><table width="83%" height="113" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style='float:left;width:100%'> <div id='tickBox'> <div id='tickCont'></div> </div></div>
</td>
</tr>
</table>
這是那個有滾動內容的表格。
琢磨別人網站的時候最好給它來一個手術,看看每一個模塊都是幹什麼的,分析的多了就成了高手了,當然我不是 ^_^
|
呵呵謝謝教導! |
|