zoukankan      html  css  js  c++  java
  • 实现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;
            }
        }
    }
  • 相关阅读:
    2020牛客暑期多校训练营(第二场)G-Greater and Greater bitset
    2020牛客暑期多校训练营(第二场)H Happy Triangle 线段树
    平衡树——splay
    动态规划之状态压缩
    动态规划入门理解
    快速幂入门
    最小生成树初步
    线性筛素数
    最短路径—迪杰斯特拉算法入门
    并查集初步
  • 原文地址:https://www.cnblogs.com/wenghaowen/p/3261569.html
Copyright © 2011-2022 走看看