您的位置：首页 > Web前端 > JavaScript

ASP.NET+Ajax+Javascript实现页面定次刷新滚动内容

2010-01-07 16:02 916 查看

一、概述

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>
    
    <marqueeSpeed>3</marqueeSpeed>
    
    <scrolTimes>1</scrolTimes>
    
    <marqueeDelay>0.5</marqueeDelay>
    
    <marqueeHeight>530</marqueeHeight>
    
    <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;
}

六、样式表

略。

七、后台数据获取

略。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript asp.net ajax class stylesheet microsoft

相关文章推荐

新的分享

章节导航