一区二区三区圖片影視文學綜合信息.,亚洲aⅤ视频一区二区三区

　JavaScript Table行定位效果

作者：cloudgamer　時(shí)間： 2009-09-17　文檔類型：原創(chuàng)　來(lái)自：藍(lán)色理想

第 1 頁(yè) JavaScript Table行定位效果 [1]
第 2 頁(yè) JavaScript Table行定位效果 [2]
第 3 頁(yè) JavaScript Table行定位效果 [3]
第 4 頁(yè) JavaScript Table行定位效果 [4]
第 5 頁(yè) JavaScript Table行定位效果 [5]
第 6 頁(yè) JavaScript Table行定位效果 [6]
第 7 頁(yè) JavaScript Table行定位效果 [7]
第 8 頁(yè) JavaScript Table行定位效果 [8]

近來(lái)有客戶要求用table顯示一大串?dāng)?shù)據(jù)，由于滾動(dòng)后就看不到表頭，很不方便，所以想到這個(gè)效果。上次做 table排序對(duì)table有了一些了解，這次更是深入了解了一番，發(fā)現(xiàn)table原來(lái)是這么不簡(jiǎn)單。

還不清楚這個(gè)效果叫什么，有點(diǎn)像表頭固定的效果，就叫行定位吧，本來(lái)想把列定位也做出來(lái)，但暫時(shí)還沒(méi)這個(gè)需求，等以后有時(shí)間再弄吧。
在淘寶的商品搜索頁(yè) 也看到類似的效果，但淘寶的不是table，而是li，而我這個(gè)是用在table上的。

要說(shuō)明一下的是，我這個(gè)效果是用在一些普通的產(chǎn)品列表，當(dāng)數(shù)據(jù)比較多時(shí)提高用戶體驗(yàn)，而不是單單做數(shù)據(jù)顯示，跟excel那樣的方式是不同的。

效果預(yù)覽

為方便預(yù)覽，建議縮小瀏覽器。

運(yùn)行代碼框
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript Table行定位效果</title> <script> var isIE = (document.all) ? true : false; var isIE6 = isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1); var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1); var isIE6or7 = isIE6 || isIE7; var isChrome = navigator.userAgent.indexOf('Chrome') != -1; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); } } } var Filter = function(array, callback, thisObject){ if(array.filter){ return array.filter(callback, thisObject); }else{ var res = []; for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array) && res.push(array[i]); } return res; } } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } }; var TableFixed = function(table, options){ this._oTable = $(table);//原table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id沖突 this._oTableLeft = this._oTableTop = this._oTableBottom = 0;//記錄原table坐標(biāo)參數(shù) this._oRowTop = this._oRowBottom = 0;//記錄原tr坐標(biāo)參數(shù) this._viewHeight = this._oTableHeight = this._nTableHeight = 0;//記錄高度 this._nTableViewTop = 0;//記錄新table視框top this._selects = [];//select集合，用于ie6覆蓋select this._style = this._nTable.style;//用于簡(jiǎn)化代碼 //chrome的scroll用document.body this._doc = isChrome ? document.body : document.documentElement; //chrome透明用rgba(0, 0, 0, 0) this._transparent = isChrome ? "rgba(0, 0, 0, 0)" : "transparent"; this.SetOptions(options); this._index = this.options.Index; this._pos = this.options.Pos; this.Auto = !!this.options.Auto; this.Hide = !!this.options.Hide; addEventHandler(window, "resize", Bind(this, this.SetPos)); addEventHandler(window, "scroll", Bind(this, this.Run)); this._oTable.parentNode.insertBefore(this._nTable, this._oTable); this.Clone(); }; TableFixed.prototype = { //設(shè)置默認(rèn)屬性 SetOptions: function(options) { this.options = {//默認(rèn)值 Index: 0,//tr索引 Auto: true,//是否自動(dòng)定位 Pos: 0,//自定義定位位置百分比(0到1) Hide: false//是否隱藏（不顯示） }; Extend(this.options, options || {}); }, //克隆表格 Clone: function(index) { //設(shè)置table樣式 this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; //設(shè)置index this._index = Math.max(0, Math.min(this._oTable.rows.length - 1, isNaN(index) ? this._index : index)); //克隆新行 this._oRow = this._oTable.rows[this._index]; var oT = this._oRow, nT = oT.cloneNode(true); if(oT.parentNode != this._oTable){ nT = oT.parentNode.cloneNode(false).appendChild(nT).parentNode; } //插入新行 if(this._nTable.firstChild){ this._nTable.replaceChild(nT, this._nTable.firstChild); }else{ this._nTable.appendChild(nT); } //去掉table上面和下面的邊框 if(this._oTable.border > 0){ switch (this._oTable.frame) { case "above" : case "below" : case "hsides" : this._nTable.frame = "void"; break; case "" : case "border" : case "box" : this._nTable.frame = "vsides"; break; } } this._style.borderTopWidth = this._style.borderBottomWidth = 0; //設(shè)置td樣式 var nTds = this._nTable.rows[0].cells; forEach(this._oRow.cells, Bind(this, function(o, i){ var css = CurrentStyle(o), style = nTds[i].style; //設(shè)置td背景 style.backgroundColor = this.GetBgColor(o, css.backgroundColor); //設(shè)置td的width,沒(méi)考慮ie8/chrome設(shè)scroll的情況 style.width = (document.defaultView ? parseFloat(css.width) : (o.clientWidth - parseInt(css.paddingLeft) - parseInt(css.paddingRight))) + "px"; })); //獲取table高度 this._oTableHeight = this._oTable.offsetHeight; this._nTableHeight = this._nTable.offsetHeight; this.SetRect(); this.SetPos(); }, //獲取背景色 GetBgColor: function(node, bgc) { //不要透明背景（沒(méi)考慮圖片背景） while (bgc == this._transparent && (node = node.parentNode) != document) { bgc = CurrentStyle(node).backgroundColor; } return bgc == this._transparent ? "#fff" : bgc; }, //設(shè)置坐標(biāo)屬性 SetRect: function() { //用getBoundingClientRect獲取原table位置 var top = this._doc.scrollTop, rect = this._oTable.getBoundingClientRect(); this._oTableLeft = rect.left + this._doc.scrollLeft; this._oTableTop = rect.top + top; this._oTableBottom = rect.bottom + top; //獲取原tr位置 rect = this._oRow.getBoundingClientRect(); this._oRowTop = rect.top + top; this._oRowBottom = rect.bottom + top; }, //設(shè)置新table位置屬性 SetPos: function(pos) { //設(shè)置pos this._pos = Math.max(0, Math.min(1, isNaN(pos) ? this._pos : pos)); //獲取位置 this._viewHeight = document.documentElement.clientHeight; this._nTableViewTop = (this._viewHeight - this._nTableHeight) * this._pos; this.Run(); }, //運(yùn)行 Run: function() { if(!this.Hide){ var top = this._doc.scrollTop, left = this._doc.scrollLeft //原tr是否超過(guò)頂部和底部 ,outViewTop = this._oRowTop < top, outViewBottom = this._oRowBottom > top + this._viewHeight; //原tr超過(guò)視窗范圍 if(outViewTop || outViewBottom){ var viewTop = !this.Auto ? this._nTableViewTop : (outViewTop ? 0 : (this._viewHeight - this._nTableHeight))//視窗top ,posTop = viewTop + top;//位置top //在原table范圍內(nèi) if(posTop > this._oTableTop && posTop + this._nTableHeight < this._oTableBottom){ //定位 if(isIE6){ this._style.top = posTop + "px"; this._style.left = this._oTableLeft + "px"; setTimeout(Bind(this, this.SetSelect), 0);//iebug }else{ this._style.top = viewTop + "px"; this._style.left = this._oTableLeft - left + "px"; } return; } } } //隱藏 this._style.top = "-99999px"; isIE6 && this.ResetSelect(); }, //設(shè)置select集合 SetSelect: function() { this.ResetSelect(); var rect = this._nTable.getBoundingClientRect(); //把需要隱藏的放到_selects集合 this._selects = Filter(this._oTable.getElementsByTagName("select"), Bind(this, function(o){ var r = o.getBoundingClientRect(); if(r.top <= rect.bottom && r.bottom >= rect.top){ o._count ? o._count++ : (o._count = 1);//防止多個(gè)實(shí)例沖突 //設(shè)置隱藏 var visi = o.style.visibility; if(visi != "hidden"){ o._css = visi; o.style.visibility = "hidden"; } return true; } })) }, //恢復(fù)select樣式 ResetSelect: function() { forEach(this._selects, function(o){ !--o._count && (o.style.visibility = o._css); }); this._selects = []; } }; </script> </head> <body style="height:1000px; width:1000px; padding-top:200px;"> <style type="text/css"> .tablefixed{width:600px; border-collapse:collapse;} .tablefixed td{ border:5px solid #999; padding:10px;} .tablefixed thead, .tablefixed tfoot{ background:#CCC;} </style> <table id="idTableFixed" class="tablefixed"> <thead> <tr> <td width="50"></td> <td>表頭</td> <td width="100"></td> </tr> </thead> <tr> <td></td> <td><a >圖片滑動(dòng)切換效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >圖片變換效果(ie only)</a></td> <td></td> </tr> <tr> <td></td> <td><a >圖片切割效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >仿LightBox內(nèi)容顯示效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >圖片滑動(dòng)展示效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >仿163網(wǎng)盤(pán)無(wú)刷新文件上傳系統(tǒng)</a></td> <td></td> </tr> <tr> <td></td> <td><a >拖放效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >圖片切割系統(tǒng)</a></td> <td></td> </tr> <tr> <td></td> <td><a >自定義多級(jí)聯(lián)動(dòng)浮動(dòng)菜單</a></td> <td></td> </tr> <tr> <td></td> <td><a >滑動(dòng)條效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >拖拉縮放效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >漸變效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >Table排序</a></td> <td></td> </tr> <tr> <td></td> <td><a >Tween算法及緩動(dòng)效果</a></td> <td></td> </tr> <tr> <td></td> <td><a >顏色梯度和漸變效果</a></td> <td></td> </tr> <tfoot> <tr> <td></td> <td>表尾</td> <td></td> </tr> </tfoot> </table> <br /> 點(diǎn)擊行選擇克隆行：當(dāng)前克隆第 <span id="idIndex">1</span> 行<br /> <br /> <input id="idPos" type="button" value="指定中間位置" /> <input id="idHide" type="button" value="取消定位" /> <br /> <br /> ps：為方便預(yù)覽，建議縮小瀏覽器。 <script> var tf = new TableFixed("idTableFixed"); forEach($("idTableFixed").rows, function(o, i){ var n = i + 1; o.cells[0].innerHTML = n; o.cells[2].innerHTML = n % 4 ? " " : "<select><option>test</option></select>"; o.onclick = function(){ $("idIndex").innerHTML = n; tf.Auto = true; tf.Clone(i); } }); tf.Clone();//表格結(jié)構(gòu)修改后應(yīng)重新Clone一次 $("idPos").onclick = function(){ tf.Auto = false; tf.SetPos(.5); } $("idHide").onclick = function(){ if(tf.Hide){ tf.Hide = false; this.value = "取消定位"; }else{ tf.Hide = true; this.value = "顯示定位"; } tf.Run(); } </script> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

注意，使用ie8的兼容性視圖會(huì)有偏移。

程序原理

一開(kāi)始的需求只是表頭部分在滾動(dòng)時(shí)能一直固定在頭部，那關(guān)鍵要實(shí)現(xiàn)的就是讓tr能定位。首先想到的方法是給tr設(shè)置relative，用ie6/7測(cè)試以下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:relative; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
</body>
</html>

給tr設(shè)置relative后就能相對(duì)table定位了，看來(lái)很簡(jiǎn)單啊，但問(wèn)題是這個(gè)方法ie8和ff都無(wú)效，而且存在很多問(wèn)題，所以很快就被拋棄了。
ps：該效果用來(lái)做tr的拖動(dòng)會(huì)很方便。

接著想到的是給table插入一個(gè)新tr，克隆原來(lái)的tr，并設(shè)置這個(gè)tr為fixed（ie6為absolute），例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<body>
<table cellpadding="5" cellspacing="0" border="1" width="100">
    <tr style="position:fixed; left:100px;">
        <td>1</td>
        <td>2</td>
    </tr>
    <tr style="position:absolute; left:200px;">
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
</body>
</html>

第一個(gè)問(wèn)題是fixed的tr在ie7中不能進(jìn)行定位，而且td在定位后并不能保持在表格中的布局，這樣在原表格插tr就沒(méi)意義了。
ps：fixed的相關(guān)應(yīng)用可參考仿LightBox效果。

最后我用的方法是新建一個(gè)table，并把源tr克隆到新table中，然后通過(guò)對(duì)新table定位來(lái)實(shí)現(xiàn)效果。用這個(gè)方法關(guān)鍵有兩點(diǎn)，首先要做一個(gè)仿真度盡可能高的tr，還有是要準(zhǔn)確的定位，這些請(qǐng)看后面的程序說(shuō)明。

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 下一頁(yè) JavaScript Table行定位效果 [2]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

更多相關(guān)鏈接

再談動(dòng)態(tài)添加樣式規(guī)則

Javascript函數(shù)類型判斷解決方案

認(rèn)識(shí)Javascript數(shù)組

解讀javascript的計(jì)時(shí)器 I

JavaScript獲取事件對(duì)象的注意點(diǎn)

作者文章

更多作者文章

JavaScript 浮動(dòng)定位提示效果

JavaScript 顏色梯度和漸變效果

JavaScript Tween算法及緩動(dòng)效果

仿Apple滑動(dòng)條(拖動(dòng))產(chǎn)品展示效果

JavaScript 圖片切割效果


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門(mén)搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開(kāi)啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問(wèn)題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛(ài)的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開(kāi)發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx