• 实现页面内多个表格在滚动时,表头浮动的效果(是同时多个表格哟)


    1。为table 的表头所在的tr增加属性:
    class="flowtitle"

    2。增加样式表(可不添加任何样式):
    .flowtitle{}

    3。添加js脚本:
     1//标题栏的自动浮动效果
     2var oldTop = 0;
     3var trs; 
     4var arrTrs = new Array();
     5function onScroll()
     6{
     7    if(arrTrs && arrTrs.length > 0)
     8    {
     9        for(var i = 0; i < arrTrs.length; i++)
    10        {    
    11            var arr = arrTrs[i];
    12            var top = (document.documentElement && document.documentElement.scrollTop) ? 
    13                    document.documentElement.scrollTop : document.body.scrollTop; 
    14            if( (top > arr[0].offsetTop || arr[1< arr[0].offsetTop) &&
    15                top < arr[2])
    16            {
    17                arr[0].style.top = top;
    18            }

    19        }

    20    }

    21}

    22function load ()
    23{
    24    //获取可浮动表头列表
    25    var trs = document.getElementsByClassName("flowtitle");
    26    if(trs && trs.length > 0)
    27    {
    28        for(var i = 0; i < trs.length; i++)
    29        {
    30            var tr = trs[i];
    31            tr.style.position = "absolute";
    32            var arr = new Array(2);
    33            arr[0= tr;
    34            arr[1= tr.offsetTop;//alert(tr.offsetTop+"|"+tr.parentNode.offsetHeight);
    35            arr[2= tr.offsetTop + tr.parentNode.offsetHeight;
    36            arrTrs[i] = arr;
    37        }

    38    }

    39}

    40window.onscroll = onScroll;
    41window.onload = load;


    代码略解:
    window.onscroll = onScroll;
    window.onload = load;        //增加事件
    load函数负责初始化可浮动表头对象的列表
    load里面的:
       arr[0] = tr;    //表头对象
       arr[1] = tr.offsetTop;// 表头原始位置
       arr[2] = tr.offsetTop + tr.parentNode.offsetHeight;//表格底部的位置
       tr.style.position = "absolute";//设置表头样式为浮动。 必须!否则不会有任何效果!
    onScroll 里面负责处理滚动事件。
       if( (top > arr[0].offsetTop || arr[1] < arr[0].offsetTop) &&
        top < arr[2])
       {
        arr[0].style.top = top;
       }
    //上面这句最重要。判断条件 不明白的话,慢慢琢磨吧


    ok,就这么简单。。但效果很酷酷的啦 

  • 相关阅读:
    世界上最遥远的距离(泰戈尔)
    肩周炎?
    [转]C#基础概念二十五问
    [转]ASP.NET 2.0的缓存技术简介
    SQL Server 2005下的分页SQL
    [转]基本的缓存类操作封装(抽象类)
    GridView鼠标经过行变色
    推荐一个好用的.NET2.0下的发送EMail的库
    Data Access Application Block for .NET
    Pet Shop 4.0的缓存机制
  • 原文地址:https://www.cnblogs.com/jacktu/p/1035760.html
Copyright © 2020-2023  润新知