運行程式碼框

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<頭>

<標題>
<樣式類型=“文字/css”>
* { 邊距：0;填充：0； }
正文 { 邊距：20px 0 400px 20px;字體：12px Arial； }
h1 { 字體大小：14px; }
ol，ul { 邊距：20px;行高：160%； }
ul li { 顏色:#f00; }
.a1 { 寬度：300px;高度：190 像素；邊框：1px實心#f00；溢出：自動； }
.a2 { 寬度：600px;高度：350px；邊距：100px 0 100px 80px；邊框：1px實心#369；背景：#eee url( );
}
.dumascroll_bar {
位置：絕對；
頂部：0；
右：0；
z 索引：9；
寬度：14px；
高度：100%；
遊標：預設；
-moz-使用者選擇：無；
-khtml-使用者選擇：無；
用戶選擇：無；
背景重複：重複-y；
背景位置：-42px 0；
浮動：左；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
位置：絕對；
左：0；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a {
寬度：100%；
高度：14px；
顏色：#fff；
文字對齊：居中；
}
.dumascroll_arrow_up,.dumascroll_arrow_up_a { 頂部:0; }
.dumascroll_arrow_down,.dumascroll_arrow_down_a { 底部:0; }
.dumascroll_handle,.dumascroll_handle_a { 寬度:100%;背景重複：重複-y； }
.dumascroll_arrow_up { 背景位置：0 0; }
.dumascroll_arrow_up_a { 背景位置：-14px 0; }
.dumascroll_handle { 背景位置：-28px 0; }
.dumascroll_handle_a { 背景位置：-56px 0; }
.dumascroll_arrow_down { 背景位置：-70px 0; }
.dumascroll_arrow_down_a { 背景位置：-84px 0; }

<腳本>
var 杜馬 = {
$:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} },
getStyle:function(o) { return o.currentStyle||document.defaultView.getCompulatedStyle(o,null); },
取得偏移量：函數（o）{
var t = o.offsetTop,h = o.offsetHeight;
while(o = o.offsetParent) { t += o.offsetTop; }
回傳 { 頂部：t，高度：h }；
},
綁定：函數（o，eType，fn）{
if(o.addEventListener) { o.addEventListener(eType,fn,false); }
else if(o.attachEvent) { o.attachEvent("on" + eType,fn); }
else { o["on" + eType] = fn; }
},
停止事件：函數（e）{
e = e ||視窗.事件;
e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false);
},
setCookie:function(c_name,value,expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + 過期天數);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
},
getCookie:函數(c_name) {
if(document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + "=");
如果（c_start！= -1）{
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(";",c_start);
if(c_end == -1) { c_end = document.cookie.length; }
返回 unescape(document.cookie.substring(c_start,c_end));
}
}
返回 ””;
}
};
duma.BeautifyScrollBar = 函數(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) {
this.arrowUpInterval;
this.arrowDownInterval;
this.barMouseDownInterval;
這個.relY;
這個.id = obj;
this.obj = 杜馬.$(this.id);
this.setObjCss(); // 預先設定父容器的css定位才能進行後續的屬性設定
this.obj.innerHTML = '

1. 支持任意形式（包括图片自定义）的美化扩展，跨浏览器支持


2. 支持鼠标按住上、下箭按钮实现上下滚动


3. 支持鼠标滚轮放于“滚动条区”滚动，而不仅限放于滚动内容区才滚


4. 支持鼠标按住滚动条（未松开）并移出滚动区域仍然能拖拽滚动


5. 滚动条子根据左边滚动内容高与可视区域高度比例等比例，且当滚动条细到一定程度时设置最小高度值,内容过少时隐藏滚动条子


6. 支持鼠标在滚动条子的上下空白区间点击实现上、下定位滚动（模拟windows滚动条）


7. 支持键盘上下方向键，滚动区滚完之后才轮到页面body滚


8. 支持页面刷新后保留滚动条滚动位置（需浏览器支持或打开cookie）


9. 鼠标放于自定义滚动区滚动滚轮，滚动区滚完之后才轮到页面body滚


10. 在原来几个版本基础上代码重构，这回只需在渲染的div里追加一个名为"dumascroll" 的class即可自动渲染，而不设此class的不受影响


11. 修复了以往版本所发现的bug：http://bbs.blueidea.com/thread-2936181- 1 -3.html " target="">以往版本

未來版本可繼續擴充的功能有：

• 增加空白鍵的「下方向」快速捲動支援（更好地模擬windows捲軸使用者體驗）


• 增加頁面body的渲染支援


• 增加textarea的渲染支援


• 增加身高div的渲染支援（目前程式碼輪廓時有滾動的bug，被增加的div的滾動高度演算法到這個版本時將大幅修改）


• 增加同時出現橫向捲軸的支援（當有這方面需求時可以擴展）

大家期待著尋找新bug並提出寶貴建議，相信下一個版本會做的更好，謝謝（QQ：149561420，gTalk： [email protected] ）。

圖片自訂捲軸3.0（Duma“自動渲染版”，也許世間萬物都會變，但真誠的愛，卻永遠留存在心中！）

1. 支援任何形式（包括圖片自訂）的美化擴展，跨瀏覽器支援
2. 支援滑鼠控制上、下箭頭按鈕實現上下滾動
3. 支援滾動滑鼠輪換於「滾動條區」滾動，而不是僅限放於滾動內容區才滾動
4. 支援滑鼠控制捲軸（未拖曳）並移出滾動區域仍然能拖曳捲軸
5. 滾動條子根據左側滾動內容高與可視區域高度比例等比例，且當滾動條細到一定程度時設定最小高度值，內容過少時隱藏滾動條子
6. 支援滑鼠在捲軸的上下空白區間點擊實現上、下定位滾動（模擬windows捲軸）
7. 支援鍵盤上下方向鍵，滾動區滾動完之後才輪到頁面內文滾動
8. 支援頁面刷新後保留捲軸滾動位置（需要瀏覽器支援或開啟cookie）
9. 滑鼠放於自訂滾動區滾動輪，滾動區滾動完後才輪到頁面body滾動
10. 在原來版本的幾個基礎上程式碼重構中，這只需在渲染的div裡追加一個名為「dumascroll」的類別就可以自動渲染，而不需要設定這個類別的不往返
11. 修正了以往版本所發現的bug：以往版本

未來版本可繼續擴充的功能有：

• 增加空白鍵的「下方向」快速捲動支援（更好地模擬windows滾動條使用者體驗）
• 增加頁面body的渲染支持
• 增加textarea的渲染支持
• 增加輪廓div的渲染支援（目前程式碼輪廓時有滾動的bug，被輪廓的div的滾動高度演算法到這個版本時將大幅修改）
• 增加同時出現橫向捲軸的支援（當有這方面需求時可以擴展）