快捷導(dǎo)航

Javascript模擬scroll滾動效果腳本第1/2頁

更新時間：2008年09月18日 17:01:50 作者：

項目需要寫了一段模擬Scroll滾動代碼，分享的同時，我有些疑問，希望大家能幫忙解決，代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title>  <style type="text/css"> .category_list{width:200px;border:solid 1px #666666;height:300px;position:relative;} #category_list{list-style:none;margin:0;padding:0;padding-left:20px;overflow:hidden;height:298px;} #category_scroll{height:298px;width:15px;border:green solid 1px;position:absolute;right:0;top:0;font-size:12px;cursor:hand;} #scrollup{height:15px;width:15px;border:green solid 1px;} #scroll_hand{height:100px;width:15px;border:green solid 1px;position:absolute;} #scrolldown{height:15px;width:15px;border:green solid 1px;position:absolute;bottom:0;} </style> </head> <body> <div   id="wppm3vysvbp"   class="category_list"> <ul id="category_list">     <li>1something</li>     <li>2something</li>     <li>3something</li>     <li>4something</li>     <li>5something</li>     <li>6something</li>     <li>7something</li>     <li>8something</li>     <li>9something</li>     <li>10something</li>     <li>11something</li>     <li>12something</li>     <li>13something</li>     <li>14something</li>     <li>15something</li>     <li>16something</li>     <li>17something</li>     <li>18something</li>     <li>19something</li>     <li>20something</li>     <li>21something</li>     <li>22something</li>     <li>23something</li>     <li>24something</li>     <li>25something</li>     <li>26something</li>     <li>27something</li>     <li>28something</li>     <li>29something</li>     <li>30something</li> </ul> <div   class="wppm3vysvbp"   id="category_scroll">     <div   class="wppm3vysvbp"   id="scrollup">上</div>             <div   class="wppm3vysvbp"   id="scroll_hand">滾動滾動滾動</div>             <div   class="wppm3vysvbp"   id="scrolldown">下</div>                      </div>      </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

現(xiàn)在有個問題就是當(dāng)點(diǎn)中滾動條后，觸發(fā)鍵盤的上下鍵，來控制上下滾動。然而，一般情況下，鍵盤事件似乎只針對Form表單對象和Winsow窗體對象起作用（除IE）,那么當(dāng)創(chuàng)建事件處理函數(shù)時該怎們寫呢？
oEventUtil.addEventHandler(category_hand,"keyup",test)，似乎是不行，畢竟category_hand代表的是一個DIV
test()函數(shù)如下：
function test(){
//alert("RUN");
var oEvent = oEventUtil.getEvent();
if(oEvent.keyCode==38){
alert("UP");
clickNarrowup();
}
if(oEvent.keyCode==40){
clickNarrowdown();
alert("DOWN");
}
}
請高手幫忙解答一下。

疑問二:這段代碼中，在定義變量的時候我是在HTML中間插入的代碼，用于獲取對象，如果這段代碼插入到window.onload函數(shù)中時，那么很有可能此時這些對象尚未加載，無法讀取到而產(chǎn)生程序錯誤，那么問題就是，如果我想完全將：
<script type="text/javascript">
var category_scroll = document.getElementById("category_scroll");
var scroll_hand = document.getElementById("scroll_hand");
var scrollup = document.getElementById("scrollup");
var scrolldown = document.getElementById("scrolldown");
var category_list = document.getElementById("category_list");
</script>
引入到<head>之間怎們處理比較好呢？
blueidea版主給出的解決方法

12 下一頁閱讀全文

您可能感興趣的文章: