使用上下按鈕向上或向下滾動表格

我想爲我的主頁創建橫幅滾動功能。我不太確定在這裏使用哪種編程語言。我想編碼類似於：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

使用上下按鈕向上或向下滾動表格

回答

相關問題