我怎样才能使一个HTML TD 's设置为溢出:隐藏滚动顺利点击一个按钮通过Javascript
How can I make an HTML TD that's set to overflow:hidden scroll smoothly with the click of a button through Javascript?
我有一个HTML TD溢出设置为隐藏。它的宽度是850px,高度是567px。里面的内容应该是567px高,1700px宽。我希望用户能够单击一个JavaScript按钮,将TD内的下一个表滚动到视图中。我该怎么做呢?我试过document.getElementById("tilesDisplay").scrollBy(10,0)
,但那不起作用。
<tr>
<td style="margin:0px; padding:0px; width:100%;" cellpadding="0px" cellspacing="0px">
<table style="margin:0px; padding:0px; width:100%; table-layout:fixed; overflow:hidden; white-space: nowrap;" cellpadding="0px" cellspacing="0px">
<tr>
<td style="background-color:#000000; vertical-align:middle; text-align:left;" onmouseover="arrow(this,1,'left');" onmouseout="arrow(this,2,'left');" onclick="ChangePortfolioImage('left');"> <img src="../images/general/arrow-left.png" style="width:25px; cursor:pointer;" /></td>
<td id="tilesDisplay" style="background-color:#000000; width:850px; height:567px; overflow:hidden; border:solid 1px #758264;">
<table>
<tr>
<td style="width:850px; height:567px;">
<table style="width:850px; height:567px;">
<tr>
<%
rowCount=0
for i=1 to (ubound(theseImagesSplit)-1)
if rowCount=3 or rowCount=6 then
rowCount=rowCount+1
response.Write("</tr><tr>")
else
if rowCount=9 then
rowCount=1
response.Write("</tr></table></td><td style=""width:850px; height:567px;""><table style=""width:850px; height:567px;""><tr>")
else
rowCount=rowCount+1
end if
end if
RS.Open "Select * FROM Portfolio WHERE ID=" & theseImagesSplit(i),conn
tiID=RS("ID")
tiImageURL=RS("imageURL")
tiCaption=RS("caption")
tiFrontPic=RS("frontPic")
tiCollection=RS("collection")
RS.Close
if cInt(tiID)=cInt(firstImage) then
tiSummary="true"
tiBorder="#3c4534"
else
tiSummary="false"
tiBorder="#bdc49f"
end if
%>
<td style="height:150px;"><center>
<table id="thumbnail<%=i %>" class="thumbnail" style="height:132px; width:198px; cursor:pointer; border:solid 1px <%=tiBorder %>;" summary="<%=tiSummary %>" onmouseover="this.style.border='solid 1px #3c4534';" onmouseout="thumbnailOut(this);" onclick="ChangePortfolioImage('<%=tiID %>'); updateThumbnailBorders(<%=(ubound(theseImagesSplit)-1) %>,<%=i %>);">
<tr>
<td style="border:solid 3px #000000;"><img src="<%=tiImageURL %>" style="height:130px;" /></td>
</tr>
</table>
</center></td>
<%
next
%>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="background-color:#000000; vertical-align:middle; text-align:right;" onmouseover="arrow(this,1,'right');" onmouseout="arrow(this,2,'right');" onclick="ChangePortfolioImage('right');"><img src="../images/general/arrow-right.png" style="width:25px; cursor:pointer;" /> </td>
</tr>
</table>
</td>
</tr>
我认为最简单的方法是使用相对定位的容器div,并在按钮单击事件上抵消容器div的位置。
<table>
<tr> <td>
<div id="table-container"> <table class="subtable"> .... </table></div>
</td> </tr>
</table>
cont = document.getElementById('table-container');
offset = 850; // Or whatever the width of the subtable
<input onClick = "cont.style.left = cont.style.left - offset;">
相关文章:
- 如何在没有外部插件的情况下在jQuery中制作一个滚动动画
- jquery scrolltop()返回上一个滚动位置的值
- 如何创建一个滚动框,然后用javascript添加内容
- 阻止浏览器在按下后退按钮时捕捉到上一个滚动位置
- 创建一个滚动条一个ext js数据视图
- 一个滚动条用于三个选项或选择区域
- 内置了一个滚动控制器,需要反转它
- 返回上一个滚动位置 - jquery移动页面设计
- 制作一个滚动视图,在用户向下滚动时进行更新
- Twitter引导程序下拉列表创建了一个滚动条
- 在html中,一个滚动区域可以嵌套在另一个滚动区中吗
- 如何给这个弹出窗口一个滚动条
- Mobile Safari:JS事件,用于在刷新时跳转到最后一个滚动位置
- 记住HTML文档上的最后一个滚动位置以便重复使用
- PHP/JS无限滚动加载所有数据从MySQL在一个滚动
- 如何使用嵌入函数(一个滚动页由Pete - peachananr)
- 如何一次一个滚动绘制每个SVG路径(按时间顺序)
- 对所有页面内容使用一个滚动条
- 停止滚动结束触发另一个滚动
- 修复标题直到下一个滚动容器内