一、概述
Marquee：Html中滾屏控件，可以使包含在此標記中的內容進行各個方向，各種速度的滾動，因此在不考慮使用第三方控件的前提下，考慮使用Marquee+xmlhttp來實現定次更新頁面中的滾動內容，此實現在IE6.0及以上版本測試通過，其他瀏覽器暫時未測試過。
Marquee中的onfinish事件：在給Marquee屬性loop賦值後，完成這些次數時，會調用onfinish事件。
二、功能及特點
1、Javascript通過Microsoft的MSXML對象，動態獲取後臺數據庫數據；
2、Javascript解析MSXML對象中的xml內容，整理爲html後，顯示給用戶；
3、通過配置文件Config.xml中的參數，可以修改Marquee的滾動速度、每筆數據的滾動次數、延時、Marquee的高度、滾動方向、鼠標懸停是否定製滾動等。
三、前臺Html
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmClearance.aspx.cs" Inherits="DynamicShow_FrmClearance" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>定次滾動示例</title>
<link href="../DynamicShow/Css/StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="marquee.js"></script>
</head>
<body>
<form id="FrmClearance" runat="server">
<table id="BodyStyle" border="0px" width="100%">
<tr>
<td style="text-align: center; vertical-align: middle; font-family: 楷體_GB2312; font-size: 35px;
color: #0A246A; font-weight: bold; height: 160px">
<img src="./Image/CustomLog.jpg" /><br />
定 次 滾 動 示 例<br />
</td>
</tr>
<tr>
<td>
<div id="divMarquee" runat="server" style="width: 100%">
</div>
</td>
</tr>
</table>
<script language="javascript" type="text/javascript">
//初始化參數
InitMarqueeParameter("marquee_clearance");
//獲取滾動數據
GenerateScrolContent("marquee_clearance");
</script>
</form>
</body>
</html>
四、Config.xml配置文件
<?xml version="1.0" encoding="utf-8" ?>
<marquee>
<marquee_clearance>
<!--marquee滾動速度-->
<marqueeSpeed>3</marqueeSpeed>
<!--marquee滾動次數-->
<scrolTimes>1</scrolTimes>
<!--marquee延時-->
<marqueeDelay>0.5</marqueeDelay>
<!--marquee高度-->
<marqueeHeight>530</marqueeHeight>
<!--marquee滾動方向-->
<marqueeDirect>up</marqueeDirect>
<!--鼠標懸停是否定製滾動-->
<marqueeStop>true</marqueeStop>
</marquee_clearance>
</marquee>
五、Javascript實現
//滾動次數
var scrolTimes=2;
//marquee滾動速度
var marqueeSpeed=5;
//marquee延時
var marqueeDelay = 0.5;
//marquee高度
var marqueeHeight=600;
//marquee滾動方向
var marqueeDirect="up";
//鼠標懸停是否定製滾動
var marqueeStop="true";
/***************初始化參數***************/
function InitMarqueeParameter(marqueeType)
{
try
{
var xmlDoc;
if(window.ActiveXObject)
{
xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
xmlDoc.async = false;
xmlDoc.load("marqueeConfig.xml");
}
if(xmlDoc==null)
{
return;
//alert('您的瀏覽器不支持xml文件讀取,於是本頁面禁止您的操作,推薦使用IE5.0以上可以解決此問題!');
}
var node;
//marquee滾動速度
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/marqueeSpeed");
marqueeSpeed = parseInt(node[0].text);
//marquee滾動次數
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/scrolTimes");
scrolTimes = parseInt(node[0].text);
//marquee延時
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/marqueeDelay");
marqueeDelay = parseInt(node[0].text);
//marquee高度
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/marqueeHeight");
marqueeHeight = parseInt(node[0].text);
//marquee滾動方向
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/marqueeDirect");
marqueeDirect = node[0].text;
//鼠標懸停是否定製滾動
node = xmlDoc.getElementsByTagName("marquee/"+marqueeType+"/marqueeStop");
marqueeStop = node[0].text;
}
catch(e)
{
}
}
/***************空值替換函數***************/
function IsNull(oldstring)
{
if(oldstring == "")
return " "
else
return oldstring;
}
/***************更新滾動內容***************/
function GenerateScrolContent(marqueeType)
{
var oXMLDoc = new ActiveXObject('MSXML');
oXMLDoc.url = "HandlerGetScrolContent.ashx?MarqueeType="+marqueeType;
var oRoot=oXMLDoc.Root;
if(oRoot.children == null)
return;
//設置Marquee各個參數
var tablecontent = "<marquee id=/"mqMain/" direction=/""+marqueeDirect+"/" height=/""+marqueeHeight+"/" onfinish=/"GenerateScrolContent('"+marqueeType+"')/" onmouseout=/"this.start()/" loop=/""+scrolTimes+"/""+(marqueeStop == "true" ? "onmouseover=/"this.stop()/"":"")+" scrollamount=/""+marqueeSpeed+"/" scrolldelay=/""+marqueeDelay+"/">";
if(marqueeType == "marquee_clearance")
{
//配置具體滾動內容
tablecontent += "<table cellpadding=/"4/" cellspacing=/"0/" width=/"100%/" class=/"clearance-table/">";
for(var i=0;i<oRoot.children.length;i++)
{
var row=oRoot.children.item(i);
if(i % 2 == 1)
tablecontent += "<tr class=/"clearance-ScrolIntervalTr/">";
else
tablecontent += "<tr class=/"clearance-ScrolNormalTr/">";
tablecontent +="<td nowrap width=/"40%/" class=/"clearance-ScrolTdStyle/">" + IsNull(row.GetAttribute("GATEJOB_NO")) + "</td>";
tablecontent +="<td nowrap width=/"20%/" class=/"clearance-ScrolTdStyle/">" + IsNull(row.GetAttribute("STEP_NAME")) + "</td>";
tablecontent +="<td nowrap width=/"20%/" class=/"clearance-ScrolTdStyle/">" + IsNull(row.GetAttribute("CAR_NO")) + "</td>";
tablecontent +="<td nowrap width=/"20%/" class=/"clearance-ScrolTdStyle/">" + IsNull(row.GetAttribute("CAR_STATUS_NAME")) + "</td>";
tablecontent +="</tr>";
}
tablecontent += "</table>";
}
tablecontent += "</marquee>";
divMarquee.innerHTML=tablecontent;
}
六、樣式表
略。
七、後臺數據獲取
略。