javascript设计水平滑动条(Firefox兼容版)

 //文章作者：心晴（欢迎转载，希望转载前通知一声：brothercat@126.com）

前段时间看世界杯看疯了。浏览新浪世界杯网站时发现其中介绍每个球星的档案页面（例如：http://2006.sina.com.cn/star/zidane.shtml）中有个很好的水平滑动条投票系统，可惜是FLASH做的，自己试着用JS写了个，望高手指正 ^_^

 

<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN " >
< html >

< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " >
< meta name = " Author "  content = " 心晴,Leon,叶茂,brothercat " >
< 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 " >
/**/ /*
www.91do.net
designed by Leon
*/
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()
... {

//the string of drag button
  var strDragBtn_ie=""
                +"<img src="http://www.91do.net/jscode/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+";"
                +"" />";

//the string of drag bar
  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)+";"
                +"" />";

//the string of drag parameter
  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=strDragBtn+strDragBar+strDragPar;
  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;
//start moving
  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;
    //alert(x);
    return false;
  }
}

function  initdragbar()
... {
  var dragbtn1=new dragBtn('d1',10,10,20,20,'dp1');
  var dragbtn2=new dragBtn('d2',30,10,20,20,'dp2');
  var dragbtn3=new dragBtn('d3',50,10,20,20,'dp3');
  var dragbtn4=new dragBtn('d4',70,10,20,20,'dp4');
  var dragbtn5=new dragBtn('d5',90,10,20,20,'dp5');
}

window.onload = initdragbar;
document.onmousedown = dragIt;
document.onmouseup = new  Function( " moveable=false " );
</ script >
</ head >

< body >

</ body >

</ html >

效果演示地址：http://www.91do.net/jscode/x-dragbar.htm