Question

我想为我的主页创建横幅滚动功能。我不太清楚这里使用哪种编程语言。我想编写类似于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>

Answer 1

如果您将内容放在两个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>

借助此编辑代码

Answer 2

看看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);
});

使用向上和向下按钮向上或向下滚动表格

2 个答案: