近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。
上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。
还不清楚这个效果叫什么，有点像表头固定的效果，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。
在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，而是li，而我这个是用在table上的。
要说明一下的是，我这个效果是用在一些普通的产品列表，当数据比较多时提高用户体验，而不是单单做数据显示，跟excel那样的方式是不同的。
效果预览
为方便预览，建议缩小浏览器。
表头
图片滑动切换效果 图片变换效果(ie only) 图片切割效果 仿LightBox内容显示效果 图片滑动展示效果 仿163网盘无刷新文件上传系统 拖放效果 图片切割系统 自定义多级联动浮动菜单 滑动条效果 拖拉缩放效果 渐变效果 Table排序 Tween算法及缓动效果 颜色梯度和渐变效果
表尾
点击行选择克隆行：当前克隆第
1
ps：为方便预览，建议缩小浏览器。
注意，使用ie8的兼容性视图会有偏移。
程序原理
一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。
首先想到的方法是给tr设置relative，用ie6/7测试以下代码：
CodeDOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
| 1 td > | 2 td >tr > | ||||||||||
| 3 td > | 4 td >tr >table >body >html >
给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如： CodeDOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
|
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/535860/
转载文章受原作者版权保护。转载请注明原作者出处！