滑动门技术,如何在div中滑动指定列

wljie103 2008-10-23 01:25:37
大概就是下面这样的页面,让第0,1,2,3列固定不动，拖动滑块时后面的列滑动.请参照最后面的例子写一段javascript来实现,或者给出思路也性.
<html>
<head>
</head>
<body>

<TABLE id="Table1" height="90%" cellSpacing="1" cellPadding="1" width="100%" border="0">
<TR vAlign="top">
<TD bgcolor=#ffffff><table class="ChildTable" cellspacing="0" rules="all" border="1" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1" style="width:100%;border-collapse:collapse;">
<tr>
<td class="ChildTableHeader" align="center" style="width:6%;">编号</td><td class="ChildNormalTitle" align="center" style="width:6%;">编码</td><td class="ChildRequiredTitle" align="center" style="width:20%;">物资名称</td><td class="ChildNormalTitle" align="center" style="width:6%;">单位</td><td class="ChildNormalTitle" align="center" style="width:10%;">计划单价</td><td class="ChildNormalTitle" align="center" style="width:6%;">计划数量</td><td class="ChildNormalTitle" align="center" style="width:6%;">计划总价</td><td class="ChildNormalTitle" align="center" style="width:6%;">一季度数量</td><td class="ChildNormalTitle" align="center" style="width:6%;">二季度数量</td><td class="ChildNormalTitle" align="center" style="width:6%;">三季度数量</td><td class="ChildNormalTitle" align="center" style="width:6%;">四季度数量</td><td class="ChildNormalTitle" align="center" style="width:12%;">基地</td><td class="ChildTableHeader" align="center" style="width:10%;">承办人</td>
</tr><tr class="ChildTableRow">
<td style="width:6%;"><table id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_Table1" cellspacing="0" cellpadding="0" width="100%">
<tr>
<TD><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefID" type="text" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefID" style="width:0px;display:none" />
<input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefName" type="text" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefName" class="SingleLineTextBox" style="width:99%;" /></TD>
<td id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_selectTD" width="15" align="right">

</td>
</tr>
</table>


</td><td align="left" style="width:6%;">1</td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_Code" type="text" value="6001" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_Code" class="NoBorderTextBox" /></td><td style="width:20%;"><span controltovalidate="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" errormessage="The item can't be null" display="Dynamic" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_rfv_txt_MaterialDescription" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;width:100%;display:none;">The item can't be null</span><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_MaterialDescription" type="text" value="rree" size="20" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" class="NoBorderTextBox" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_UOM" type="text" value="re" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_UOM" class="NoBorderTextBox" /></td><td style="width:10%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanCost" type="text" maxlength="20" size="10" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanCost" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PurchaseSum" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PurchaseSum" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FirstQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FirstQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_SecondQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_SecondQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_ThirdQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_ThirdQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:6%;"><input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FourthQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FourthQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /></td><td style="width:12%;"><select name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:cbo_Warehouse" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_cbo_Warehouse" KEY="0" style="border-style:Solid;">
<option selected="selected" value="1"> </option>
<option value="2">aaa</option>
<option value="3">bbb</option>
<option value="4">ccc</option>

</select></td><td align="left" style="width:10%;">213</td>
</tr>
</table>
</body>
</html>


==============================================

...全文
221 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
xuxing999 2009-04-25
  • 打赏
  • 举报
 回复
http://www.namipan.com/d/d0e6cf238f259f8d08c434d52a900f9cf488e778fb31da04
滑动技术视频教程
nj_link 2008-10-23
  • 打赏
  • 举报
 回复
这样行不?
document.getElementById("表格id").class = "css class id"
wljie103 2008-10-23
  • 打赏
  • 举报
 回复
另外我不是要在html上改,而是要用javascript改,因为数据可能有多行
wljie103 2008-10-23
  • 打赏
  • 举报
 回复
不是我设的,是页面生成后,自动产生的
nj_link 2008-10-23
  • 打赏
  • 举报
 回复
没事把id值设置的那么长干嘛
吃饱了撑着
nj_link 2008-10-23
  • 打赏
  • 举报
 回复

你这代码看了太头痛了 改了你看一下：
<html>
<head>

<style>

.relativeTag
{
position:relative;
};

.fixCol
{
background-color:#ffffff;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
};

.mainDiv
{
overflow:auto;
}
</style>

</head>
<body>

<div class="mainDiv" style="width:600px;height:122px;">
<TABLE id="Table1" height="90%" cellSpacing="1" cellPadding="1" width="100%" border="0">
<TR class="ChildTableRow" vAlign="top">
<TD bgcolor=#ffffff >

<table class="ChildTable" cellspacing="0" rules="all" border="1" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1" style="width:100%;border-collapse:collapse;">
<TR class="relativeTag" >
<td class="fixCol" class="ChildTableHeader" align="center" style="width:6%;">编号 </td>
<td class="fixCol" class="ChildNormalTitle" align="center" style="width:6%;">编码 </td>
<td class="fixCol" class="ChildRequiredTitle" align="center" style="width:20%;">物资名称 </td>
<td class="fixCol" class="ChildNormalTitle" align="center" style="width:6%;">单位 </td>
<td class="ChildNormalTitle" align="center" style="width:10%;">计划单价 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">计划数量 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">计划总价 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">一季度数量 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">二季度数量 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">三季度数量 </td>
<td class="ChildNormalTitle" align="center" style="width:6%;">四季度数量 </td>
<td class="ChildNormalTitle" align="center" style="width:12%;">基地 </td>
<td class="ChildTableHeader" align="center" style="width:10%;">承办人 </td>
</tr>
<tr class="relativeTag" class="ChildTableRow">
<td style="width:6%;" class="fixCol" >
<table id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_Table1" cellspacing="0" cellpadding="0" width="100%">
<TR class="relativeTag" >
<TD class="fixCol">
<input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefID" type="text" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefID" style="width:0px;display:none" />
<input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:ref_ChangeStatus:txtRefName" type="text" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_txtRefName" class="SingleLineTextBox" style="width:99%;" /> </TD>
<td id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_ref_ChangeStatus_selectTD" width="15" align="right">
</td>
</tr>
</table>
</td>

<td align="left" style="width:6%;" class="fixCol">1 </td>
<td style="width:6%;" class="fixCol" >
<input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_Code" type="text" value="6001" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_Code" class="NoBorderTextBox" /> </td>
<td style="width:20%;" class="fixCol" > <span controltovalidate="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" errormessage="The item can't be null" display="Dynamic" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_rfv_txt_MaterialDescription" evaluationfunction="RequiredFieldValidatorEvaluateIsValid" initialvalue="" style="color:Red;width:100%;display:none;">The item can't be null </span> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_MaterialDescription" type="text" value="rree" size="20" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_MaterialDescription" class="NoBorderTextBox" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_UOM" type="text" value="re" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_UOM" class="NoBorderTextBox" /> </td>
<td style="width:10%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanCost" type="text" maxlength="20" size="10" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanCost" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PlanQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PlanQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_PurchaseSum" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_PurchaseSum" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FirstQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FirstQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_SecondQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_SecondQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_ThirdQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_ThirdQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:6%;"> <input name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:txt_FourthQuarterQuantity" type="text" maxlength="20" size="6" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_txt_FourthQuarterQuantity" class="NoBorderTextBox" style="ime-mode:disabled;" /> </td>
<td style="width:12%;"> <select name="TabControl1:tabPage2:ChildEdit_MaterialList:DataGrid1:_ctl2:cbo_Warehouse" id="TabControl1_tabPage2_ChildEdit_MaterialList_DataGrid1__ctl2_cbo_Warehouse" KEY="0" style="border-style:Solid;">
<option selected="selected" value="1"> </option>
<option value="2">aaa </option>
<option value="3">bbb </option>
<option value="4">ccc </option>

</select> </td> <td align="left" style="width:10%;">213 </td>
</tr>
</table>
</div>
</body>
</html>
wljie103 2008-10-23
  • 打赏
  • 举报
 回复
参照:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>1111</title>
<style>

.relativeTag
{
position:relative;
};

.fixCol
{
background-color:#cccccc;
position:relative;
left:expression(this.parentElement.offsetParent.scrollLeft);
};

.mainDiv
{
overflow:auto;
}
</style>
</head>

<body>
<div class="mainDiv" style="width:200px;height:150px;">
<table width="100%" border=1 cellspacing=0 >
<TR class="relativeTag" >
<TD class="fixCol" width="100" nowrap>Header A</TD>
<TD width="100" nowrap>Header B</TD>
<TD width="100" nowrap>Header C</TD>
</TR>
<TR class="relativeTag" >
<TD class="fixCol" >A</TD>
<TD>B</TD>
<TD>C</TD>
</TR>
</table>
</div>
</body>
</html>
div滑动门技术
一张背景图片,结合css中的 滑动门 技术,让鼠标点击过去, 就感觉 更换了 图片那样，其实,只有一张图片只是背景图片改变了位置而已.
仿网易的滑动门技术DIV+CSS实现
仿网易的滑动门技术DIV+CSS实现
仿百度地图app，js制作H5中的滑动面板
实战实例使用js制作H5的滑动面板，仿照移动端APP百度地图点击地点后弹出的滑动面板，代码可以直接使用，并且已经实现组件化，视频对代码有详细的讲解，逻辑与分析的讲解，提供全部代码的下载。对于有类似开发需求的朋友，可以直接使用代码或者在此基础上进行修改，节省大量时间。讲解功能设计思维与方法，提供解决问题的能力。程序员必备。
DIV滑动门代码
<script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <div class="nTab"> <div class="TabTitle">
  • 预拔电杆
  • 预等电杆
  • 普拔电杆
  • 部预电杆
div> <div class="TabContent"> <div id="myTab0_Content0"> 欢迎访问：阿里西西WEB开发 div> <div id="myTab0_Content1" class="none">计源论坛 计源论坛div> <div id="myTab0_Content2" class="none">计源论坛22div> <div id="myTab0_Content3" class="none">计源论坛33div> div> div>
滑动门(Div+css)
网页滑动门，html WEB开发语言，DIV+CSS 和javascript实现鼠标移动更换DIV
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章