| 加入收藏| 设为首页| 联系我们
JS模拟滑动条的实例
http://www.domcn.org 文章来源：本站原创 点击数：
在构架VONE的时候，需要用到滑动条来控制软件的透明度以及文字速度，这些本来是其他WIN编程的事情，但是由于前台必须由HTML完成，所以结合一些网上的资料做出了这样的滑动控制条。 <!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=gb2312"> <title>水平滑动条</title> <style type="text/css"> img.dragBtn{position:absolute;border:0;cursor:E-resize} hr.dragBar{position:absolute;} input.dragPar{position:absolute;width:30px;height:18px;border:0} </style> <script language="javascript" type="text/javascript"> var ie=document.all; var ns6=document.getElementById&&!document.all; var moveable=false; var x,y; var targetObj; var index=100; var _xL=10; var _xR=110; function dragBtn(id,t,l,w,h,mark) { index = index+2; this.zIndex = index; this.id =id; this.top =t; this.left =l; this.width =w; this.height =h; this.mark =mark; this.initDrag=initDrag; this.initDrag(); } function initDrag() { var strDragBtn_ie="" +"<img src=\"plus.gif\" class=\"dragBtn\" " +"id=\""+this.id+"\" " +"style=\"z-index:"+(this.zIndex+1)+";" +"top:"+(this.top-3)+";" +"left:"+this.left+";" +"width:"+this.width+";" +"height:"+this.height+";" +"\" />"; var strDragBtn_ns="" +"<img src="/plus.gif/" class="dragBtn" " +"id=\""+this.id+"\" " +"style=\"z-index:"+(this.zIndex+1)+";" +"top:"+this.top+";" +"left:"+this.left+";" +"width:"+this.width+";" +"height:"+this.height+";" +"\" />"; var strDragBar_ie="" +"<hr size=\"3\" class=\"dragBar\" " +"style=\"z-index:"+(this.zIndex-1)+";" +"top:"+(this.top+6)+";" +"left:"+(this.left+8)+";" +"width:"+(this.width+82)+";" +"\" />"; var strDragBar_ns="" +"<hr size=\"3\" class=\"dragBar\" " +"style=\"z-index:"+(this.zIndex-1)+";" +"top:"+this.top+";" +"left:"+(this.left+8)+";" +"width:"+(this.width+82)+";" +"\" />"; var strDragPar="" +"<input type=\"text\" class=\"dragPar\" " +"id=\""+this.mark+"\" " +"value=\""+this.left+"\" " +"style=\"z-index:"+this.zIndex+";" +"top:"+this.top+";" +"left:"+(this.left+140)+";" +"\" />"; var str=ie?strDragBar_ie+strDragBtn_ie+strDragPar:strDragBar_ns+strDragBtn_ns+strDragPar; if(ie) { document.body.insertAdjacentHTML('beforeEnd',str); } else { document.body.innerHTML+=str; } } function moveIt(e) { var coordinate; if(moveable) { coordinate=ns6?tmp+e.clientX-x:tmp+event.clientX-x; if(coordinate<_xL) { targetObj.style.left=_xL; } else { if(coordinate>_xR) { targetObj.style.left=_xR; } else { targetObj.style.left=coordinate; } } } targetObj.nextSibling.value=Math.round((parseInt(targetObj.style.left)-10)/10); return false } function dragIt(e) { if (!ie&&!ns6) return; var getObj=ns6?e.target:event.srcElement; var topElement=ns6?"HTML":"BODY"; while(getObj.tagName!=topElement&&getObj.className!="dragBtn") { getObj=ns6?getObj.parentNode:getObj.parentElement; } if(getObj.className=="dragBtn") { moveable=true; targetObj=getObj; tmp=parseInt(targetObj.style.left); x=ns6?e.clientX:window.event.clientX; document.onmousemove=moveIt; return false; } } function initdragbar() { var dragbtn1=new dragBtn('d1',10,10,20,20,'dp1'); } window.onload=initdragbar; document.onmousedown=dragIt; document.onmouseup=new Function("moveable=false"); </script> </head> <body> </body> </html>
在构架VONE的时候，需要用到滑动条来控制软件的透明度以及文字速度，这些本来是其他WIN编程的事情，但是由于前台必须由HTML完成，所以结合一些网上的资料做出了这样的滑动控制条。
<!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=gb2312"> <title>水平滑动条</title> <style type="text/css"> img.dragBtn{position:absolute;border:0;cursor:E-resize} hr.dragBar{position:absolute;} input.dragPar{position:absolute;width:30px;height:18px;border:0} </style> <script language="javascript" type="text/javascript"> var ie=document.all; var ns6=document.getElementById&&!document.all; var moveable=false; var x,y; var targetObj; var index=100; var _xL=10; var _xR=110; function dragBtn(id,t,l,w,h,mark) { index = index+2; this.zIndex = index; this.id =id; this.top =t; this.left =l; this.width =w; this.height =h; this.mark =mark; this.initDrag=initDrag; this.initDrag(); } function initDrag() { var strDragBtn_ie="" +"<img src=\"plus.gif\" class=\"dragBtn\" " +"id=\""+this.id+"\" " +"style=\"z-index:"+(this.zIndex+1)+";" +"top:"+(this.top-3)+";" +"left:"+this.left+";" +"width:"+this.width+";" +"height:"+this.height+";" +"\" />"; var strDragBtn_ns="" +"<img src="/plus.gif/" class="dragBtn" " +"id=\""+this.id+"\" " +"style=\"z-index:"+(this.zIndex+1)+";" +"top:"+this.top+";" +"left:"+this.left+";" +"width:"+this.width+";" +"height:"+this.height+";" +"\" />"; var strDragBar_ie="" +"<hr size=\"3\" class=\"dragBar\" " +"style=\"z-index:"+(this.zIndex-1)+";" +"top:"+(this.top+6)+";" +"left:"+(this.left+8)+";" +"width:"+(this.width+82)+";" +"\" />"; var strDragBar_ns="" +"<hr size=\"3\" class=\"dragBar\" " +"style=\"z-index:"+(this.zIndex-1)+";" +"top:"+this.top+";" +"left:"+(this.left+8)+";" +"width:"+(this.width+82)+";" +"\" />"; var strDragPar="" +"<input type=\"text\" class=\"dragPar\" " +"id=\""+this.mark+"\" " +"value=\""+this.left+"\" " +"style=\"z-index:"+this.zIndex+";" +"top:"+this.top+";" +"left:"+(this.left+140)+";" +"\" />"; var str=ie?strDragBar_ie+strDragBtn_ie+strDragPar:strDragBar_ns+strDragBtn_ns+strDragPar; if(ie) { document.body.insertAdjacentHTML('beforeEnd',str); } else { document.body.innerHTML+=str; } } function moveIt(e) { var coordinate; if(moveable) { coordinate=ns6?tmp+e.clientX-x:tmp+event.clientX-x; if(coordinate<_xL) { targetObj.style.left=_xL; } else { if(coordinate>_xR) { targetObj.style.left=_xR; } else { targetObj.style.left=coordinate; } } } targetObj.nextSibling.value=Math.round((parseInt(targetObj.style.left)-10)/10); return false } function dragIt(e) { if (!ie&&!ns6) return; var getObj=ns6?e.target:event.srcElement; var topElement=ns6?"HTML":"BODY"; while(getObj.tagName!=topElement&&getObj.className!="dragBtn") { getObj=ns6?getObj.parentNode:getObj.parentElement; } if(getObj.className=="dragBtn") { moveable=true; targetObj=getObj; tmp=parseInt(targetObj.style.left); x=ns6?e.clientX:window.event.clientX; document.onmousemove=moveIt; return false; } } function initdragbar() { var dragbtn1=new dragBtn('d1',10,10,20,20,'dp1'); } window.onload=initdragbar; document.onmousedown=dragIt; document.onmouseup=new Function("moveable=false"); </script> </head> <body> </body> </html>
