AjaxUI：滑动条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<meta content-type="text/html" charset="gb2312"/> 
<style type="text/css"> 
body{text-align:center;font:12px Arial;} 
#bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;} 
#drag{width:20px;height:20px;background:#0ff;} 
p{width:600px;text-align:left;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%20var%20Parameter%3B%20%0D%0A%20var%20first%3Dtrue%3B%20%0D%0A%2F%2F%E5%88%9B%E5%BB%BA%E9%BC%A0%E6%A0%87%E5%AF%B9%E8%B1%A1%20%0D%0Avar%20Cursor%3Dnew%20Object()%3B%20%0D%0A%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E9%BC%A0%E6%A0%87%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%20%0D%0ACursor.getCrusorCoordinate%3Dfunction(event)%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20x%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20y%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20if(event.pageX)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20x%3Devent.pageX%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20y%3Devent.pageY%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20x%3Devent.clientX%2Bdocument.body.scrollLeft-document.body.clientLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20y%3Devent.clientY%2Bdocument.body.scrollTop-document.body.clientTop%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20%7Bx%3Ax%2Cy%3Ay%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0%E5%AF%B9%E8%B1%A1%20%0D%0Afunction%20Element(id)%20%0D%0A%7B%20%0D%0A%20%20%20%20this.obj%3Ddocument.getElementById(id)%3B%20%0D%0A%7D%20%0D%0A%0D%0AElement.prototype%3D%7B%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%8E%B7%E5%BE%97%E5%AF%B9%E8%B1%A1%20%0D%0A%20%20%20%20getElement%3Afunction()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(this.obj!%3Dnull%7C%7Cthis.obj!%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20this.obj%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%22no%20such%20Element%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%8E%B7%E5%BE%97%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%88%B6%E8%8A%82%E7%82%B9%E7%9A%84id%2C%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%88%99%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%20%0D%0A%20%20%20%20getElementParent%3Afunction()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(this.obj!%3Dnull%7C%7Cthis.obj!%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20obj%3Dthis.obj.parentNode%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(obj!%3Dnull%7C%7Cobj!%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(obj.id%3D%3Dnull%7C%7Cobj.id%3D%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20obj.setAttribute(%22id%22%2Cthis.obj.id%2B%22_parent%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20obj.id%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22no%20such%20parentNode%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%22no%20such%20ParentNode%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E8%8E%B7%E5%BE%97%E5%AF%B9%E8%B1%A1%E7%9A%84%E9%A1%B5%E9%9D%A2%E5%9D%90%E6%A0%87%20%0D%0A%20%20%20%20getElementOffset%3Afunction()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(this.obj!%3Dnull%7C%7Cthis.obj!%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20left%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20top%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20obj%3Dthis.obj%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20while(obj.offsetParent)%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20left%2B%3Dobj.offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top%2B%3Dobj.offsetTop%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20obj%3Dobj.offsetParent%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%7BoffsetLeft%3Aleft%2CoffsetTop%3Atop%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%7BoffsetLeft%3A%22no%20such%20Element%22%2CoffsetTop%3A%22no%20such%20Element%22%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%2C%20%0D%0A%0D%0A%20%20%20%20%2F%2F%E8%8E%B7%E5%BE%97%E5%AF%B9%E8%B1%A1%E7%9A%84%E8%87%AA%E8%BA%AB%E5%B0%BA%E5%AF%B8%20%0D%0A%20%20%20%20getElementSize%3Afunction()%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20if(this.obj!%3Dnull%7C%7Cthis.obj!%3Dundefined)%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%7Bwidth%3Athis.obj.offsetWidth%2Cheight%3Athis.obj.offsetHeight%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20else%20%0D%0A%20%20%20%20%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%7Bwidth%3A%22no%20such%20Element%22%2Cheight%3A%22no%20such%20Element%22%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20startMove(event)%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20event%3Devent%20%7C%7C%20window.event%3B%20%0D%0A%20%20%20%20var%20marginLeft%3DCursor.getCrusorCoordinate(event).x-Parameter.difX-Parameter.minLeft-Parameter.pL%3B%20%0D%0A%20%20%20%20if(marginLeft%3C%3D0)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20marginLeft%3D0%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20if(marginLeft%3E%3DParameter.maxLeft)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20marginLeft%3DParameter.maxLeft%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20Parameter.obj.style.marginLeft%3DmarginLeft%2B%22px%22%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%BC%80%E5%A7%8B%E6%8B%96%E5%8A%A8%E5%B9%B6%E8%AE%BE%E7%BD%AE%E5%88%9D%E5%A7%8B%E5%8F%82%E6%95%B0%20%0D%0Afunction%20startDrag(event%2Cobj)%20%0D%0A%7B%20%0D%0A%20%20%20%20if(first)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20childElement%3Dobj%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20parentElement%3Dnew%20Element(childElement.getElementParent())%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20cL%3DchildElement.getElementOffset().offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20pL%3DparentElement.getElementOffset().offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20minLeft%3DcL-pL%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20maxLeft%3DparentElement.getElementSize().width-minLeft-childElement.getElementSize().width%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20difX%3DCursor.getCrusorCoordinate(event).x-childElement.getElementOffset().offsetLeft%3B%20%0D%0A%20%20%20%20%20%20%20%20Parameter%3D%7Bobj%3AchildElement.getElement()%2CpL%3ApL%2CminLeft%3AminLeft%2CmaxLeft%3AmaxLeft%2CdifX%3AdifX%7D%3B%20%0D%0A%20%20%20%20%20%20%20%20first%3Dfalse%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20if(document.attachEvent)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.attachEvent(%22onmousemove%22%2CstartMove)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20if(document.addEventListener)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.addEventListener(%22mousemove%22%2CstartMove%2Cfalse)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20stopDrag()%20%0D%0A%7B%20%0D%0A%20%20%20%20if(document.detachEvent)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.detachEvent(%22onmousemove%22%2CstartMove)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20else%20if(document.removeEventListener)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20document.removeEventListener(%22mousemove%22%2CstartMove%2Cfalse)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E8%AE%BE%E7%BD%AE%E6%8B%96%E5%8A%A8%E7%9B%91%E5%90%AC%20%0D%0Afunction%20dragBind()%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20element%3Dnew%20Element(%22drag%22)%3B%20%0D%0A%20%20%20%20var%20childElement%3Delement.getElement()%3B%20%0D%0A%20%20%20%20childElement.onmousedown%3Dfunction(event)%7BstartDrag(event%2Celement)%3B%7D%3B%20%0D%0A%20%20%20%20childElement.onmouseup%3Dfunction()%7BstopDrag()%3B%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0Awindow.onload%3DdragBind%3B%20%0D%0A%3C%2Fscript%3E"> 
</HEAD> 
<BODY> 
<div id="bg"><div id="drag" style="margin-left:0px;"></div></div>

<p>滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。</p> 
</BODY> 
</HTML>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程