JS模拟滑动条的实例

在构架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>

赞(0) 打赏
未经允许不得转载:WEB前端开发 » JS模拟滑动条的实例

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏