0

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

2 回答 2

0

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

借助此编辑您的代码

于 2012-06-12T10:20:58.370 回答
0

看看 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);
});
于 2012-06-12T10:40:02.213 回答