JavaScript教程:Table行定位效果

近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做 table排序 对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。

还不清楚这个效果叫什么，有点像表头固定的效果，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。
在 淘宝的商品搜索页 也看到类似的效果，但淘宝的不是table，而是li，而我这个是用在table上的。

要说明一下的是，我这个效果是用在一些普通的产品列表，当数据比较多时提高用户体验，而不是单单做数据显示，跟excel那样的方式是不同的。

效果预览

为方便预览，建议缩小浏览器。

运行代码框
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://...<a href="https://www.tulaoshi.com/n/20160220/1632968.html" target="_blank">[ 查看全文 ]</a></p> <div class="img_yyy_2"> <span>2016-02-20</span> <i>标签:</i> <div class="yyy_2_a"><a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> </div> </div> </div> </div> <div class="xiangguan_gg xiangguan_reader clearfix"> <div class="xiang_892_1" style="width:1158px;"> <h3><a href="https://www.tulaoshi.com/n/20160220/1632968.html" target="_blank">JavaScript教程:Table行定位效果</a>的相关文章</h3> </div> <div class="xiang_892_2" style="width:1158px;"> <ul id="loadmore_container" style="width:1158px;"> <li> <div class="xiang_892_2_1"><a href="/reader/1623832" target="_blank"><img src="https://img.tulaoshi.com/201602/19/d678491252a1bfeda8eb6a5b2234fe95_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1623832.html" target="_blank">javascript操作table</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 动态产生tr 针对table给予一个名字，比如说tbl1 var oTr=tbl1.insetRow(); 动态产生td 针对动态产生的tr产生td var oTd=oTd.insertCell(); //var oTd=oTr.insertCell(); 吧 动态产生td内容 使用innerHTML var oTd.innerHTML='input type=text id=text1 name=text1 value=abc'; ----------------------------------------------- 对于已经存在的table中，取得td,tr对象的方式假设已经...<a href="https://www.tulaoshi.com/n/20160219/1623832.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/风暴来袭大本营/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>风暴来袭大本营</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1589524" target="_blank"><img src="https://img.tulaoshi.com/201602/19/4ac2e06edd303768b947e3beb57ba21f_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1589524.html" target="_blank">table 行转列的sql详解</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/bianchengyuyan/" target="_blank">编程语言</a> <a href="https://www.tulaoshi.com/wangluobiancheng/" target="_blank">网络编程</a></div> <div class="span_em_123"> 一、要求 1 创建数据表 CREATE TABLE [dbo].[StuScore]( [stuid] [int] NOT NULL, [subject] [nvarchar](30) NULL, [score] [decimal](5, 1) NULL ) 2 插入测试数据 stuid subject score 3 chinese 76.0 3 math 73.0 4 chinese 82.0 5 chinese 66.0 5 math 93.0 6 chinese 67.0 7 math 83.0 8 chinese 77.0 8 math 84.0 3 行转列后的结果 stuid chinese math 3 76.0 73.0 4 82.0 0.0 ...<a href="https://www.tulaoshi.com/n/20160219/1589524.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/战斗的金将军/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/4.jpg" /><span>战斗的金将军</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621501" target="_blank"><img src="https://img.tulaoshi.com/201602/19/ec7500180a8e5e673a9fd72a1b841b5b_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621501.html" target="_blank">使用 JavaScript 获取 table 行号和列号</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 怎样获取预定义的table的行号和列号呢？很简单，只需要了解table的几个属性值用法即可。Table的总行数可以通过标记“tr”得到，但是table的列数却不能直接获取，它需要借助rows通过标记“th”和“td”得到。 为了更直观，下面以示例来说明如何得到行号和列号。点击Id为'MyTable'的表格的任意单元时，返回该单元的行号和列号！示例代码如下：       function getR...<a href="https://www.tulaoshi.com/n/20160219/1621501.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/土鳖爆炒/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>土鳖爆炒</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">12</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632763" target="_blank"><img src="https://img.tulaoshi.com/201602/20/b2abd6e48b3fb53c332dcedd64fea30e_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632763.html" target="_blank">Javascript教程:拖放效果研究</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 拖放效果，也叫拖拽，学名Drag-and-drop ，是最常见的js特效之一。 如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。 这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。 虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就像自己学习的知识那样。 这里考虑到...<a href="https://www.tulaoshi.com/n/20160220/1632763.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/生命奇迹多多/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>生命奇迹多多</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632702" target="_blank"><img src="https://img.tulaoshi.com/201602/20/4156ed72bfdd732bf181c1a2c32de39c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632702.html" target="_blank">JavaScript教程:图片切割效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 自上一个版本的图片切割效果出来后，虽然也经常看到框架开发这个如何如何容易之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。 上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。 近来我把其中的 拖放效果 和 缩放效果 单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。 要说明的是这个只是一个效果，并不是...<a href="https://www.tulaoshi.com/n/20160220/1632702.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/流年逝水sing/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/12.jpg" /><span>流年逝水sing</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">65</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621736" target="_blank"><img src="https://img.tulaoshi.com/201602/19/a48ae7efd729a06dc1603b99ed6719ca_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621736.html" target="_blank">css应用：单击table使点击的行变色</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 代码如下： script function bgChange(obj) { objobj.bgColor=obj.bgColor==""？"#B6DC73":""; } /script table width="80%" border="1" bgcolor="#ffffcc" tr onclick="bgChange(this)" tdaa25.cn/td tdaa25.cn/td /tr tr onclick="bgChange(this)" tdaa25.cn/td tdaa25.cn/td /tr tr onclick="bgChange(this)" tdaa25.cn/td ...<a href="https://www.tulaoshi.com/n/20160219/1621736.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/苏唯是/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/26.jpg" /><span>苏唯是</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">32</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1589509" target="_blank"><img src="https://img.tulaoshi.com/201602/19/36ad5b71cfe028781da198db332701cc_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1589509.html" target="_blank">一实用的实现table排序的Javascript类库</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 一个Javascript 的类库，用于table内容排序。使用很方便，不用每次都去调用数据库了。 特别适合多表查询的排序。加上tbody的style.display 切换，也可以实现分页。 效果演示 用法: 1.添加JS SCRIPT src="sorttable.js" type="text/javascript"/SCRIPT 2.添加TABLE,注意的是：一定要有ID,class为"sortable" table class="sortable" id="mytable" OK,可以了，简单...<a href="https://www.tulaoshi.com/n/20160219/1589509.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/zhang7917259/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>zhang7917259</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1607173" target="_blank"><img src="https://img.tulaoshi.com/201602/19/c43d9e5dfdaa242a5ee14c3f53ddafd4_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1607173.html" target="_blank">用UL实现非Table四行三列布局</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 先看看效果： 下面是源代码： html head titletest/title style type="text/css" ul{  margin:0px;  padding:0px;  width:200px;  } ul li{  float:left;  list-style-type:none;  border-top:#000 solid 1px;                 border-left:#000 solid 1px; ...<a href="https://www.tulaoshi.com/n/20160219/1607173.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/玩不起d/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/13.jpg" /><span>玩不起d</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">32</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1590761" target="_blank"><img src="https://img.tulaoshi.com/201602/19/878bcc76abfa22826b4523e8eb4d584c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1590761.html" target="_blank">firefox中用javascript实现鼠标位置的定位</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123">/**  * 取得鼠标坐标  * @return Position  */  function getMouseLocation(){  if(ns4||ns6){  mouseX = e.pageX;  mouseY = e.pageY;  }  else{  mouseX = event.x + document.body.scrollLeft;  mouseY = event.y + document.body.scrollTop;  ...<a href="https://www.tulaoshi.com/n/20160219/1590761.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/惠民县人啊/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/11.jpg" /><span>惠民县人啊</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632243" target="_blank"><img src="https://img.tulaoshi.com/201602/20/776c97b20aabe0a4de9bc99dd96ae63d_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632243.html" target="_blank">JavaScript教程：JavaScript函数</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 函数为程序设计人员提供了一个非常方便的能力。通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。 ...<a href="https://www.tulaoshi.com/n/20160220/1632243.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/超级开辟疆土/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/3.jpg" /><span>超级开辟疆土</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1621731" target="_blank"><img src="https://img.tulaoshi.com/201602/19/9fa86fc4f7a6f644cec1de6673e95dc7_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1621731.html" target="_blank">用javascript/css实现GridView行背景色交替、点击行变色</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 面是代码，注释应该还算比较详细，比较适合初学者，可以把下面两个文件的代码直接复制到你的项目中直接执行。最下面有文件的下载地址，也可以直接下载后运行，代码在IE7和Firefox2下测试通过，有任何问题，请在下面留言，我将尽量及时回复。 BackgroundColor.aspx 主要包含一个GridView，是我们折腾的重点对象，还有一堆javascript，是我们折腾GridView的手段 %@ Page Language="C#" AutoEv...<a href="https://www.tulaoshi.com/n/20160219/1621731.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/上帝我想你/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/21.jpg" /><span>上帝我想你</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">68</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610635" target="_blank"><img src="https://img.tulaoshi.com/201602/19/ca18b7a9215ca680b5246ace69017e54_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1610635.html" target="_blank">JavaScript 弹出层效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> function sAlert(str){    var msgw,msgh,bordercolor;    msgw=400;//提示窗口的宽度    msgh=100;//提示窗口的高度    titleheight=25 //提示窗口标题高度    bordercolor="#336699";//提示窗口的边框颜色    titlecolor="#99CCFF";//提示窗口的标题颜色      var sWidth,sHeight;    sWidth=document.bod...<a href="https://www.tulaoshi.com/n/20160219/1610635.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/拆迁律师99/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/25.jpg" /><span>拆迁律师99</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">4</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1596233" target="_blank"><img src="https://img.tulaoshi.com/201602/19/cfe8be6854058ab86081332c5f329d99_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1596233.html" target="_blank">JavaScript 经典效果集</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 些很实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音  embed src="pnm://10.13.31.90/~kayvin/mihunji.rm" hidden=true autostart=true loop=true  脚本2:进入主页后自动最大话,省的去在自己单击了  script  self.moveTo(0,0)  self.resizeTo(screen.availWidth,screen.availHeight)  /script  脚本3:显示现在时间的脚本  ...<a href="https://www.tulaoshi.com/n/20160219/1596233.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/wgaitami0/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/23.jpg" /><span>wgaitami0</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1615089" target="_blank"><img src="https://img.tulaoshi.com/201602/19/6777cf49123ff898e9c06e88568eea26_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1615089.html" target="_blank">网页技巧 用UL实现非Table四行三列布局</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 先看看效果： 效果图 下面是源代码： htmlheadtitletest/titlestyle type="text/css"ul{margin:0px;padding:0px;width:200px;}ul li{float:left;list-style-type:none;border-top:#000 solid 1px; border-left:#000 solid 1px;width:65px;}.border-r{ border-right:#000 solid 1px; }.border-b{ border-bottom:...<a href="https://www.tulaoshi.com/n/20160219/1615089.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/郓城腾腾j/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/9.jpg" /><span>郓城腾腾j</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">10</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1611539" target="_blank"><img src="https://img.tulaoshi.com/201602/19/375a3230ddfb2645cad9dcb0b5bfe10c_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1611539.html" target="_blank">给select控件在指定位置插入option(javascript)</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 问题描述       对于select控件 1 2 3，我们可以通过它的options.add(new Option(v,t))的方法动态的插入一个option选项，但是新增的option的位置只能在最后，却不能插入到指定的任意位置。 解决方法       既然select的options属性提供的方法无法实现上面的需求，那么只好找办法了。我们知道html控件都有一个insertBefore的方法，用以在指定位置插入子...<a href="https://www.tulaoshi.com/n/20160219/1611539.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/百年孤独_aa/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>百年孤独_aa</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">118</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632239" target="_blank"><img src="https://img.tulaoshi.com/201602/20/8418b1336f2ec08beab0648b07b3a454_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632239.html" target="_blank">JavaScript教程：什么是JavaScript？</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点： 脚本编写语言 ...<a href="https://www.tulaoshi.com/n/20160220/1632239.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/罗萃英338276/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/29.jpg" /><span>罗萃英338276</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">1</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1632262" target="_blank"><img src="https://img.tulaoshi.com/201602/20/4fa290f0cd011c0e2c85f75cc8219d37_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160220/1632262.html" target="_blank">JavaScript制作滚动文本效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 下面是一个跑马灯效果的JavaScript文档。 Test2_1.html html head script Language="JavaScript" var msg="这是一个跑马灯效果的JavaScript文档"; var interval = 100; var spacelen = 120; var space10=" "; var seq=0; function Scroll() { len = msg.length; window.status = msg.substring(0, seq+1); seq++; if ( seq = len ) { seq = spacelen; window.setTimeou...<a href="https://www.tulaoshi.com/n/20160220/1632262.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/四川蜀旺科技30/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/22.jpg" /><span>四川蜀旺科技30</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">3</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1610029" target="_blank"><img src="https://img.tulaoshi.com/201602/19/1969fc97c44d123841af48fe33abc810_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1610029.html" target="_blank">JavaScript幻灯片效果</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 源程序： !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" / meta http-equiv="expires" content="0" titleJavaScript幻灯片效果/title style type="text/css" !-- body { font-size:12px; } input { &nbs...<a href="https://www.tulaoshi.com/n/20160219/1610029.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/幸运的嗨菜/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/19.jpg" /><span>幸运的嗨菜</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">2</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1601282" target="_blank"><img src="https://img.tulaoshi.com/201602/19/3b84f1cad18002bfb1bc2416b5a53669_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1601282.html" target="_blank">表单提交(插入效果)javascript</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> <a href="https://www.tulaoshi.com/n/20160219/1601282.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/羊与阳光/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/2.jpg" /><span>羊与阳光</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">0</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> <li> <div class="xiang_892_2_1"><a href="/reader/1629781" target="_blank"><img src="https://img.tulaoshi.com/201602/19/7d190858b69996dd00054fc091ce0555_thumb_189.jpg" width="224" height="173"></a></div> <div class="xiang_right clearfix"> <div class="xiang_right_1"><A href="https://www.tulaoshi.com/n/20160219/1629781.html" target="_blank">CSS教程:容器定位</A></div> <div class="xiang_righ_lable">标签：<a href="https://www.tulaoshi.com/webkaifa/" target="_blank">Web开发</a></div> <div class="span_em_123"> 原文：http://www.linxz.cn/blog2/article.asp？id=140 很神奇的一个晚上，居然在以前老同事的群里跟同事讨论起CSS的东西来了，不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后，出现容器内的文字不可选择（测试的时候主要用带连接的文字）。 xhtml结构： div a href="#"定位后无法选择容器的内容解决方案/a /div css样式： div {     position:absolute;  ...<a href="https://www.tulaoshi.com/n/20160219/1629781.html" target="_blank">[ 查看全文 ]</a></div> <div class="span_em "> <div class="cai_list_font"><a href="/user/利琴a/" target="_blank"><img src="https://static.tulaoshi.com/html/tulaoshi_new/images/touxiang/1.jpg" /><span>利琴a</span></a></div> <span class="font_span"><a class="em_s" href="javascript:;">5</a><a class="em_s2" href="javascript:;">1</a></span></div> </div> </li> </ul> <div id="pages" class="clearfix"> <a href="/reader/21245.html">上一页</a><a href="/reader/21242.html">21242</a><a href="/reader/21243.html">21243</a><a href="/reader/21244.html">21244</a><a href="/reader/21245.html">21245</a><a href="/reader/21246.html" class="cur">21246</a><a href="/reader/21247.html">21247</a><a href="/reader/21248.html">21248</a><a href="/reader/21249.html">21249</a><a href="/reader/21250.html">21250</a><a href="/reader/21247.html">下一页</a> </div> </div> </div> <!--footer底部--> <script type="text/javascript">tls.output.show_foot();</script> <div class="float_bottom" id="fixbottom" style="bottom:30px;"> <a href="https://m.tulaoshi.com//" class="icon_hu3">手机页面</a> <div class="float_bot_2"> <a href="javascript:;"id="show_search_input"> <input type="submit" class="input_sub" id="fixbottom_search_btn"> <input type="text" class="text_a_input" placeholder="输入你想搜索的关键词" style="display:none;" id="fixbottom_search_input"> </a> </div> <a href="javascript:;" class="icon_hu2" id="fav_site_btn" data-url="https://www.tulaoshi.com//">收藏网站</a> <a href="javascript:;" class="icon_hu" id="totop">回到头部</a> </div> <!--tag PC分类 标签--> <script type="text/javascript" src="https://static.tulaoshi.com/js/zt.js"></script> </body> </html>