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

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

来源

2012-06-12 Psinyee

嗯...阻止右键单击一个网站...糟糕的设计，不要复制的那部分;） – musefan

提供一个jsfiddle和有人会帮助你。 – iappwebdev

如果你把内部的两个div标签的内容，你可以使用CSS来剪辑外层div和“滚动”内的div通过脚本的CSS“顶”值，即：

<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-12 10:20:58

...然后nnn？... – musefan

但我必须使用向上和向下按钮来实现它。 – Psinyee

@Naveen Kumar Yadav如何添加滚动效果？ – Psinyee

看一看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-12 10:40:02 iappwebdev

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

回答

相关问题