图片制作的滚动条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> * { margin:0; padding:0; } body { margin:20px 0 400px 20px; font:12px Arial; } h1 { font-size:14px; } ol,ul { margin:20px; line-height:160%; } ul li { color:#f00; } .dumascroll { position:relative; width:600px; height:350px; margin:100px 0 100px 80px; border:1px solid #369; background:#eee url(http://www.zbw123.com/webmaster/ximenScrollBar/images/duma.gif) no-repeat 50%; overflow:hidden; } .dumascroll_area { height:100%; overflow:auto; } .dumascroll_bar,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { background-image:url(http://www.zbw123.com/webmaster/ximenScrollBar/images/un_bg_bar.gif); } .dumascroll_bar { position:absolute; top:0; right:0; z-index:9; width:14px; height:100%; cursor:default; -moz-user-select:none; -khtml-user-select:none; user-select:none; background-repeat:repeat-y; background-position:-42px 0; float:left; } .dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_handle,.dumascroll_handle_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { position:absolute; left:0; } .dumascroll_arrow_up,.dumascroll_arrow_up_a,.dumascroll_arrow_down,.dumascroll_arrow_down_a { width:100%; height:14px; color:#fff; text-align:center; } .dumascroll_arrow_up,.dumascroll_arrow_up_a { top:0; } .dumascroll_arrow_down,.dumascroll_arrow_down_a { bottom:0; } .dumascroll_handle,.dumascroll_handle_a { width:100%; background-repeat:repeat-y; } .dumascroll_arrow_up { background-position:0 0; } .dumascroll_arrow_up_a { background-position:-14px 0; } .dumascroll_handle { background-position:-28px 0; } .dumascroll_handle_a { background-position:-56px 0; } .dumascroll_arrow_down { background-position:-70px 0; } .dumascroll_arrow_down_a { background-position:-84px 0; } body,td,th { font-family: Arial, Helvetica, sans-serif; } </style> </head> <body> <div id="myDiv" class="dumascroll"> <div id="myDivArea" class="dumascroll_area"> fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br />11111111<br />fsdfs<br /> </div> <div id="myDivBar" class="dumascroll_bar"> <div class="dumascroll_arrow_up"></div> <div class="dumascroll_handle"></div> <div class="dumascroll_arrow_down"></div> </div> </div> <script> var duma = { $:function(o){ if(document.getElementById(o)) {return document.getElementById(o);} }, getStyle:function(o) { return o.currentStyle||document.defaultView.getComputedStyle(o,null); }, getOffset:function(o) { var t = o.offsetTop,h = o.offsetHeight; while(o = o.offsetParent) { t += o.offsetTop; } return { top:t, height:h }; }, bind:function(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; } }, unbind:function(o,eType,fn) { if(o.removeEventListener) { o.removeEventListener(eType,fn,false); } else if(o.detachEvent) { o.detachEvent("on" + eType,fn); } else { o["on" + eType] = fn; } }, stopEvent:function(e) { e = e || window.event; e.stopPropagation && (e.preventDefault(),e.stopPropagation()) || (e.cancelBubble = true,e.returnValue = false); } }; duma.BeautifyScrollBar = function(obj,arrowUpCss,arrowUpActiveCss,handleCss,handleActiveCss,arrowDownCss,arrowDownActiveCss) { this.arrowUpInterval; this.arrowDownInterval; this.barMouseDownInterval; this.relY; this.obj = duma.$(obj); this.area = duma.$(obj + "Area"); this.bar = duma.$(obj + "Bar"); this.arrowUp = this.bar.getElementsByTagName("div")[0]; this.arrowUpCss = arrowUpCss; this.arrowUpActiveCss = arrowUpActiveCss; this.handle = this.bar.getElementsByTagName("div")[1]; this.handleCss = handleCss; this.handleActiveCss = handleActiveCss; this.arrowDown = this.bar.getElementsByTagName("div")[2]; this.arrowDownCss = arrowDownCss; this.arrowDownActiveCss = arrowDownActiveCss; this.handleMinHeight = 15; this.arrowUpHeight = parseInt(duma.getStyle(this.arrowUp).height); this.arrowDownHeight = parseInt(duma.getStyle(this.arrowDown).height); this.areaScrollHeight = this.area.scrollHeight; this.handleHeight = parseInt(this.area.offsetHeight/this.area.scrollHeight * (this.bar.offsetHeight - this.arrowUpHeight - this.arrowDownHeight)); } duma.BeautifyScrollBar.prototype = { init:function() { this.area.style.width = parseInt(duma.getStyle(this.obj).width) + 20 - parseInt(duma.getStyle(this.bar).width) + "px"; /*˿ = Ԫؿ + (ʵ20px - ģ),ʵƫ*/ }, sethandle:function() { //ݳʱקӵС߶ this.handle.style.top = this.arrowUpHeight + "px"; if(this.handleHeight > this.handleMinHeight) { this.handle.style.height = this.handleHeight + "px"; } else { this.handleHeight = this.handleMinHeight; this.handle.style.height = this.handleMinHeight + "px"; } }, clearArrowUpInterval:function() { clearInterval(this.arrowUpInterval); }, clearArrowDownInterval:function() { clearInterval(this.arrowDownInterval); }, clearBarMouseDownInterval:function() { clearInterval(this.barMouseDownInterval); }, areaScroll:function() { this.handle.style.top = this.area.scrollTop/(this.area.scrollHeight - this.area.offsetHeight) * (this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight) + this.arrowUpHeight + "px"; }, handleMove:function(e) { var e = e || window.event; this.area.scrollTop = (e.clientY - this.relY - this.arrowUpHeight)/(this.bar.offsetHeight - this.handleHeight - this.arrowUpHeight - this.arrowDownHeight)*(this.area.scrollHeight - this.area.offsetHeight); }, handleMouseDown:function(e) { var et = e.target || event.srcElement,that = this, thatHandleMove = function(e) { return that.handleMove(e); }; //ñհڷקunbind¼ this.relY = e.clientY - et.offsetTop; if(this.handle.setCapture) { this.handle.setCapture(); } this.handle.className = this.handleActiveCss; duma.bind(document,"mousemove",thatHandleMove); duma.bind(document,"mouseup",function(e){ that.handle.className = that.handleCss; if(that.handle.releaseCapture){ that.handle.releaseCapture(); } duma.unbind(document,"mousemove",thatHandleMove); }); duma.stopEvent(e); }, barScroll:function(e) { var e = e || window.event,eDir; //ù¼,e.wheelDeltae.detailֱIEW3CݷֵжϹ if(e.wheelDelta) { eDir = e.wheelDelta/120; } else if(e.detail) { eDir = -e.detail/3; } if(eDir > 0) { this.area.scrollTop -= 80; } //80aȽϽӽwindowĹٶ else { this.area.scrollTop += 80; } if(this.area.scrollTop > 0 && this.area.scrollTop < this.area.scrollHeight - this.area.offsetHeight){ duma.stopEvent(e); } }, barDown:function(e) { var e = e || window.event,that = this, eY = e.clientY, mStep = this.bar.offsetHeight, documentScrollTop = document.documentElement.scrollTop || document.body.scrollTop, hOffset = duma.getOffset(this.handle), bOffset = duma.getOffset(this.bar); if(documentScrollTop + eY < hOffset.top) { this.barMouseDownInterval = setInterval(function(e){ that.area.scrollTop -= that.area.offsetHeight; if(that.area.scrollTop <= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); } },80); } else if(documentScrollTop + eY > hOffset.top + hOffset.height) { this.barMouseDownInterval = setInterval(function(){ that.area.scrollTop += that.area.offsetHeight; if(that.area.scrollTop >= (eY + documentScrollTop - bOffset.top - that.arrowUpHeight - hOffset.height)/(that.bar.offsetHeight - that.arrowUpHeight - that.arrowDownHeight) * that.area.scrollHeight) { that.clearBarMouseDownInterval(); } },80); } duma.stopEvent(e); }, arrowUpMouseDown:function(e) { var that = this; this.arrowUpInterval = setInterval(function(){ that.area.scrollTop -= 25; },10); this.arrowUp.className = this.arrowUpActiveCss; duma.stopEvent(e); }, arrowUpMouseUp:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; }, arrowUpMouseOut:function() { this.clearArrowUpInterval(); this.arrowUp.className = this.arrowUpCss; }, arrowDownMouseDown:function(e) { var that = this; this.arrowDownInterval = setInterval(function(){ that.area.scrollTop += 25; },10); this.arrowDown.className = this.arrowDownActiveCss; duma.stopEvent(e); }, arrowDownMouseUp:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; }, arrowDownMouseOut:function() { this.clearArrowDownInterval(); this.arrowDown.className = this.arrowDownCss; }, run:function(){ var that = this; this.init(); this.sethandle(); duma.bind(this.area,"scroll",function(){that.areaScroll()}); duma.bind(this.obj,"mousewheel",function(event){that.barScroll(event)}); duma.bind(this.obj,"DOMMouseScroll",function(event){that.barScroll(event)}); duma.bind(this.handle,"mousedown",function(event){that.handleMouseDown(event)}); duma.bind(this.bar,"mousedown",function(event){that.barDown(event)}); duma.bind(this.bar,"mouseup",function(){that.clearBarMouseDownInterval()}); duma.bind(this.arrowUp,"mousedown",function(event){that.arrowUpMouseDown(event)}); duma.bind(this.arrowUp,"mouseup",function(){that.arrowUpMouseUp()}); duma.bind(this.arrowUp,"mouseout",function(){that.arrowUpMouseOut()}); duma.bind(this.arrowDown,"mousedown",function(event){that.arrowDownMouseDown(event)}); duma.bind(this.arrowDown,"mouseup",function(){that.arrowDownMouseUp()}); duma.bind(this.arrowDown,"mouseout",function(){that.arrowDownMouseOut()}); } } duma.bind(window,"load",function(){ var myDiv = new duma.BeautifyScrollBar("myDiv","dumascroll_arrow_up","dumascroll_arrow_up_a","dumascroll_handle","dumascroll_handle_a","dumascroll_arrow_down","dumascroll_arrow_down_a"); myDiv.run(); }); </script> </body> </html>