实现GridView内容循环滚动 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!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 id="Head1" runat="server"> 
  <title></title> 
  <style type="text/css"> 
   .blk_02 
    { 
      margin-top: 4px; 
    } 
    .blk_02 .table_title table 
    { 
      border-left: 1px solid #b3d3ec; 
      border-top: 1px solid #b3d3ec; 
      background: #e0f0fd; 
      color: #5198cc;
      margin:0 auto;       
    } 
    .blk_02 .table_title table th 
    { 
      border-right: 1px solid #b3d3ec; 
      border-bottom: 1px solid #b3d3ec; 
      height: 24px; 
      font-weight: normal;        
    } 
     
    .blk_02 .table_data 
    { 
      height: 500px; 
      overflow: auto;
      width:916px; 
    } 
    .blk_02 .table_data table 
    { 
      border-left: 1px solid #b3d3ec; 
    } 
    .blk_02 .table_data table td 
    { 
      border-right: 1px solid #b3d3ec; 
      border-bottom: 1px solid #b3d3ec; 
      height: 24px; 
      font-weight: normal; 
      text-align: center; 
    }
    #g{margin:0 auto;}
    .table_title{width:900px;}
  </style> 
</head> 
<body> 
  <form id="form1" runat="server"> 
  <div class="blk_02" id="chg"> 
    <div class="table_title"> 
      <table width="885" cellspacing="0"> 
        <tbody> 
          <tr> 
            <th width="20%"> 
              姓名 
            </th> 
            <th width="20%"> 
              班级 
            </th> 
            <th width="50px"> 
              语文 
            </th> 
          </tr> 
        </tbody> 
      </table> 
    </div> 
    <div class="table_data" id="demo"> 
      <div id="demo1"> 
        <asp:GridView ID="g" runat="server" AutoGenerateColumns="false" ShowHeader="false" 
          Font-Size="12px" CellPadding="3" Width="885"> 
          <Columns> 
            <asp:TemplateField ItemStyle-Width="20%"> 
              <ItemTemplate> 
                <%#Eval("学生班级")%> 
              </ItemTemplate> 
            </asp:TemplateField> 
            <asp:TemplateField ItemStyle-Width="20%"> 
              <ItemTemplate> 
                <%#Eval("学生姓名") %> 
              </ItemTemplate> 
            </asp:TemplateField> 
            <asp:TemplateField ItemStyle-Width="50px"> 
              <ItemTemplate> 
                <%#Eval("语文") %> 
              </ItemTemplate> 
            </asp:TemplateField> 
          </Columns> 
        </asp:GridView> 
      </div> 
    </div> 
  </div> 
 
  <script> 
    var speed = 30 
    function Marquee() { 
      if (document.getElementById("demo").scrollTop >= document.getElementById("demo1").offsetHeight - document.getElementById("demo").offsetHeight) { 
        document.getElementById("demo").scrollTop = 0; 
      } else { 
        document.getElementById("demo").scrollTop++ 
      } 
    } 
    var MyMar = setInterval(Marquee, speed) 
    document.getElementById("demo").onmouseover = function() { clearInterval(MyMar) } 
    document.getElementById("demo").onmouseout = function() { MyMar = setInterval(Marquee, speed) }  
  </script> 
 
  </form> 
</body> 
</html>

后台：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient; 
namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            g.DataSource = GetData();
            g.DataBind();

        }



        private DataTable GetData()
        {
            System.Data.DataTable dt = new System.Data.DataTable();
            System.Data.DataRow dr;
            dt.Columns.Add(new System.Data.DataColumn("学生班级", typeof(System.String)));
            dt.Columns.Add(new System.Data.DataColumn("学生姓名", typeof(System.String)));
            dt.Columns.Add(new System.Data.DataColumn("语文", typeof(System.Decimal)));
            dt.Columns.Add(new System.Data.DataColumn("数学", typeof(System.Decimal)));
            dt.Columns.Add(new System.Data.DataColumn("英语", typeof(System.Decimal)));
            dt.Columns.Add(new System.Data.DataColumn("计算机", typeof(System.Decimal)));

            for (int i = 0; i < 50; i++)
            {
                System.Random rd = new System.Random(Environment.TickCount * i); ;
                dr = dt.NewRow();
                dr[0] = "班级" + i.ToString();
                dr[1] = "【孟子E章】" + i.ToString();
                dr[2] = System.Math.Round(rd.NextDouble() * 100, 2);
                dr[3] = System.Math.Round(rd.NextDouble() * 100, 2);
                dr[4] = System.Math.Round(rd.NextDouble() * 100, 2);
                dr[5] = System.Math.Round(rd.NextDouble() * 100, 2);
                dt.Rows.Add(dr);
            }
            return dt;
        }
    }
}

 

posted @ 2013-08-16 10:42  天殇月痕  阅读(718)  评论(0)  编辑  收藏  举报