来源:ITPOW(www.itpow.com)
注意样式表的使用
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>滑块条</title> <style type="text/css"> #trackBar { background-color:#666666; } #trackBar_slider { border:1px solid #808080; background-color:#FFFFFF; } #trackBar2 { background-color:#CC0000; } #trackBar2_slider { border:1px solid #808080; background-color:#FFFFFF; } </style> </head> <body> <div> <a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a> <hr> </div> <div id="info"> </div> <div id="trackBar"> </div> <div id="trackBar2"> </div> <script type="text/javascript" language="javascript"> <!-- //对象未创建完成之前,不能在函数之中用this function CTrackBar(trackBarIdStr, min, max, pos) { this.trackBarIdStr = trackBarIdStr; this.sliderIdStr = trackBarIdStr + "_slider"; this.trackBarId = document.getElementById(this.trackBarIdStr); this.sliderId = null; //还未创建 this.min = (min>=0)?min:0; this.max = (max>=min)?max:min; this.pos = (pos>=min && pos<=max)?pos:min; this.orientation = "h"; this.trackBarWidth = 100; this.trackBarHeight = 10 this.sliderWidth = 10; this.sliderHeight = 10; this.Create = Create; //函数 this.draging = false; this.offset = 0; this.BeforeDrag = BeforeDrag; this.OnDrag = OnDrag; this.EndDrag = EndDrag; } function Create(trackBarObjName) { if (this.orientation == "h") { this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr + "\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBarObjName + ");\"" + " style=\"position:relative;cursor:e-resize;\"></div>"; this.sliderId = document.getElementById(this.sliderIdStr); this.sliderId.style.pixelLeft = ((this.trackBarWidth-this.sliderWidth)*this.pos)/(this.max-this.min); } else { this.trackBarId.innerHTML = "<div id=\"" + this.sliderIdStr + "\"" + " onmousedown=\"javascript:BeforeDrag(" + trackBarObjName + ");\"" + " style=\"position:relative;cursor:n-resize;\"></div>"; this.sliderId = document.getElementById(this.sliderIdStr); this.sliderId.style.pixelTop = this.trackBarHeight - ((this.trackBarHeight-this.sliderHeight)*this.pos)/(this.max-this.min) - this.sliderHeight; } this.trackBarId.style.width = this.trackBarWidth; this.trackBarId.style.height = this.trackBarHeight; this.sliderId.style.width = this.sliderWidth; this.sliderId.style.height = this.sliderHeight; return true; } var curTrackBar = null; //准备拖拽 function BeforeDrag(trackBar) { if (event.button != 1) { return; } document.body.style.cursor = (this.orientation=="h")?"e-resize":"n-resize"; curTrackBar = trackBar; curTrackBar.draging = true; if (curTrackBar.orientation == "h") { curTrackBar.offset = event.clientX - curTrackBar.trackBarId.style.pixelLeft - curTrackBar.sliderId.style.pixelLeft; } else { curTrackBar.offset = curTrackBar.trackBarId.style.pixelTop + curTrackBar.sliderId.style.pixelTop+curTrackBar.sliderId.offsetHeight- event.clientY; } } //拖拽中 function OnDrag() { if(!curTrackBar || !curTrackBar.draging) { return; } event.returnValue = false; var phyPos = 0; if (curTrackBar.orientation == "h") { phyPos = event.clientX - curTrackBar.trackBarId.style.pixelLeft - curTrackBar.offset; if (phyPos <= 0) { phyPos = 0; } else if(phyPos >= (curTrackBar.trackBarId.offsetWidth-curTrackBar.sliderId.offsetWidth)) { phyPos = curTrackBar.trackBarId.offsetWidth - curTrackBar.sliderId.offsetWidth; } } else { phyPos = curTrackBar.trackBarId.style.pixelTop + curTrackBar.trackBarId.offsetHeight - event.clientY - curTrackBar.offset; if (phyPos <= 0) { phyPos = 0; } else if(phyPos >= (curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight)) { phyPos = curTrackBar.trackBarId.offsetHeight - curTrackBar.sliderId.offsetHeight; } } if (curTrackBar.orientation == "h") { curTrackBar.sliderId.style.pixelLeft = phyPos; curTrackBar.pos = parseInt(((curTrackBar.max-curTrackBar.min)*phyPos/(curTrackBar.trackBarId.offsetWidth-curTrackBar.sliderId.offsetWidth))); } else { curTrackBar.sliderId.style.pixelTop = curTrackBar.trackBarId.offsetHeight - phyPos - curTrackBar.sliderId.offsetHeight; curTrackBar.pos = parseInt(((curTrackBar.max-curTrackBar.min)*phyPos/(curTrackBar.trackBarId.offsetHeight-curTrackBar.sliderId.offsetHeight))); } OnTrackBarChng(); } //结束拖拽 function EndDrag() { if (!curTrackBar) { return; } document.body.style.cursor = "default"; curTrackBar.draging = false; } function OnTrackBarChng() { document.getElementById("info").innerHTML = curTrackBar.pos+ " / " + curTrackBar.max; } document.onmousemove = OnDrag; document.onmouseup = EndDrag; var trackBarObj = new CTrackBar("trackBar", 0, 100, 90); trackBarObj.Create("trackBarObj"); var trackBarObj2 = new CTrackBar("trackBar2", 0, 100, 90); trackBarObj2.orientation = "v"; trackBarObj2.trackBarWidth = 20; trackBarObj2.trackBarHeight = 100; trackBarObj2.sliderWidth = 20; trackBarObj2.sliderHeight = 20; trackBarObj2.Create("trackBarObj2"); //--> </script> </body> </html>[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
创建于2005年 渝ICP备05010272号-1
电邮:cftea@126.com