我想为我的主页创建一个横幅滚动功能。我不太确定在这里使用哪种编程语言。我想编写类似于以下内容的代码:http://www.squidfaceandthemeddler.com/。但我希望页脚在用户滚动表格时保持在同一位置。有可能得到那个结果吗?我创建了一个简单的表格和 2 张图像供用户点击
这是我的表代码:
<div id="banner" style="height:750px; width:600px; overflow:scroll;" >
<table width="750px" height="600px">
<tr>
<td><a href="sale_1.php"><img src="banner1.png"/></a></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><a href="sale_2.php"><img src="banner2.png"/></a></td>
</tr>
</table>
<table width="750px" height="600px">
<tr>
<td><a href="sale_3.php"><img src="banner3.png"/></a></td>
</tr>
</table>
</div>
这是用于滚动的向上和向下按钮:
<table width="750px" height="30px">
<tr>
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td>
</tr>
</table>
如果你把内容放在两个div标签中,你可以使用CSS来剪辑外部div 并通过编写其 CSS "top" 值来"滚动"内部div,因此:
<html><head><style>
#contents{
position: relative; top: 0; left: 0; width: 100px; height: auto;}
#scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
}
</style>
<script>
var t = 0;
function up()
{
t += 10;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
function down()
{
t -= 10;
with(document.getElementById("contents"))
{
if(t < -clientHeight)
t = -clientHeight;
if(style)
style.top = t + "px";
else
setAttribute("style", "top: " + t + "px");
}
}
</script></head>
<body><table><tr><td><a href="javascript:void(0)" onclick="up()">up</a></td>
<td rowspan="2"><div id="scrollable">
<div id="contents">scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
scrolling content scrolling content scrolling content scrolling content
</div></div>
</td></tr><tr><td>
<a href="javascript:void(0)" onclick="down()">down</a></td></tr></table>
</body></html>
借助此编辑代码
看看 jquery scrolltop: http://api.jquery.com/scrollTop/。我会将表格宽度固定到一定高度,就像您已经做的那样,然后:
$('#buttonUpID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop - 600);
});
$('#buttonDownID').click(function () {
var currentScrollTop = $('body').scrollTop();
$('body').scrollTop(currentScrollTop + 600);
});