ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条-CSDN博客

本文链接：https://blog.csdn.net/men007/article/details/7091835
需要jquery库支持
代码如下:
<!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=utf-8" />
<title>ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条</title>
<style type="text/css">
div{margin:0px;padding:0px;}
.leftStyle{background:#9F9;width:10px;border:1px solid #999;cursor:default;}
.rightStyle{background:#9f9;width:10px;border:1px solid #999;cursor:default}
.sliderStyle{border:1px solid #999;}
.sliderBlockStyle{background:#CCC; width:40px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>

<body>
<div id="x1" style="margin:auto;"></div>
<div id="re"></div>
<script type="text/javascript">

//--JZ_slider for IE,FF,Opera,Safari

//--Lisences: to anybody,doing anything for any purpose

//--author:mender

//blog:http://hi.baidu.com/%D4%FA%BF%A1/blog/

//postqustion:http://hi.baidu.com/%D4%FA%BF%A1/blog/item/c5fd23d3a7febb1e3bf3cf7d.html

 function ZJ_slider(){ 
 this.objid    = arguments[0]||"ZJ_slider";
 this.leftBtnStyle  = arguments[1]||"leftStyle";
 this.rightBtnStyle  = arguments[2]||"rightStyle";
 this.sliderStyle  = arguments[3]||"sliderStyle";
 this.sliderBlockStyle = arguments[4]||"sliderBlockStyle";
 this.sliderMax   = arguments[5]||255;
 this.sliderMin   = arguments[6]||0;
 this.step    = arguments[7]||1;
 this.width    = arguments[8]||255;
 this.height    = arguments[9]||25;
 this.callback   = arguments[10]||"ZJ_callback";
 this.initPoint   = this.sliderMin;
 this.oName    = "";
 //this.moveStatus   = 0;
 }
 moveStatus=0;
 ZJ_slider.prototype.init=function (){
 ostr="#"+this.objid;
 $(ostr).html("");
 $(ostr).css("position","relative");
 $(ostr).width(this.width);
 $(ostr).height(this.height);
 $(ostr).append("<div id='leftBtn' οnclick='"+this.oName+".moveLeft()' class='"+this.leftBtnStyle+"' style='float:left;position:relative;'><<div>");
 $(ostr).append("<div id='slider' class='"+this.sliderStyle+"' style='float:left;position:relative;'></div>")
 $(ostr).append("<div id='rightBtn'  οnclick='"+this.oName+".moveRight()' class='"+this.rightBtnStyle+"' style='float:left;position:relative;'>></div>");
 $("#slider").width(parseInt($(ostr).width())-parseInt($("#leftBtn").width())-parseInt($("#rightBtn").width())-20);
 $("#slider").append("<div id='sliderBlock' class='"+this.sliderBlockStyle+"' style='position:absolute;'></div>");
 if (this.browser()=="ipad"){
  document.getElementById("sliderBlock").addEventListener("touchstart",this.touchStart,false);   
  }
 else{
 document.getElementById("sliderBlock").setAttribute("onmousedown",this.oName+".moveStart(event)");
 }
 $("#leftBtn").height(this.height);
 $("#slider").height(this.height);
 $("#rightBtn").height(this.height);
 $("#sliderBlock").height(this.height);
 this.setPoint(this.initPoint);
 alert(navigator.userAgent);
 }
 ZJ_slider.prototype.touchStart=function(){
  moveStatus=1;
  document.addEventListener("touchmove",this.touchMove,false);
  document.addEventListener("touchend",this.touchEnd,false);
  alert("开始了");
  }
 ZJ_slider.prototype.touchMove=function (e){
  e.preventDefault();
  if(!e.touches.length) return;
  if (moveStatus==1){
   if (parseInt($("#sliderBlock").css("left"))>=0&& parseInt($("#sliderBlock").css("left"))<=(parseInt($("#slider").width())-parseInt($("#sliderBlock").width()))){     
   offsetL=e.clientX-parseInt(getSliderBlockPosition(document.getElementById("slider")))-parseInt($("#sliderBlock").width())/2;
   if (offsetL<0) offsetL=0;
   if(offsetL>parseInt($("#slider").width())-parseInt($("#sliderBlock").width())){                      offsetL=parseInt($("#slider").width())-parseInt($("#sliderBlock").width());                                                               }
   $("#sliderBlock").css("left",offsetL);
   ZJ_sldr.callb();
   }
   }
  }
  
 ZJ_slider.prototype.touchEnd=function(e){
  moveStatus=0;
  document.removeEventListener("touchmove",this.touchMove,false);
  document.removeEventListener("touchend",this.touchEnd,false);  
  }
 ZJ_slider.prototype.moveLeft=function(){
  if (this.getPoint()-this.sliderMin>this.step){
  this.setPoint(this.getPoint()-this.step);
  }else if (this.getPoint()>1){
   this.setPoint(this.sliderMin);
   }
  }
 ZJ_slider.prototype.moveRight=function (){
  if (this.sliderMax-this.getPoint()>this.step){
  this.setPoint(this.getPoint()+this.step);
  }else if (this.sliderMax-this.getPoint()>1){
   this.setPoint(this.sliderMax);
   }
  }
 ZJ_slider.prototype.getPoint=function(){
  return Math.floor(this.sliderMin+(parseInt($("#sliderBlock").css("left"))*(this.sliderMax-this.sliderMin)/(parseInt($("#slider").width())-parseInt($("#sliderBlock").width()))));
  }
 ZJ_slider.prototype.browser=function (){
  var ua=navigator.userAgent
    ua=ua.toLocaleLowerCase();
    return ua.match("msie")? ua.match("msie"):
    ua.match("firefox")? ua.match("firefox"):
    ua.match("chrome")? ua.match("chrome"):
    ua.match("opera")? ua.match("opera"):
    ua.match("ipad")? ua.match("ipad"):
    ua.match("safari")? ua.match("safari"):"Unknown Browser";
  return ua;
  }
 ZJ_slider.prototype.moveStart=function (){
  moveStatus=1;
  document.οnmοuseup=this.moveStop;
  document.οnmοusemοve=this.moving;  
  }
 
 ZJ_slider.prototype.moving=function (e){
  e=e? e:window.event;
  if (moveStatus==1){
   if (parseInt($("#sliderBlock").css("left"))>=0&& parseInt($("#sliderBlock").css("left"))<=(parseInt($("#slider").width())-parseInt($("#sliderBlock").width()))){     
   offsetL=e.clientX-parseInt(getSliderBlockPosition(document.getElementById("slider")))-parseInt($("#sliderBlock").width())/2;
   if (offsetL<0) offsetL=0;
   if(offsetL>parseInt($("#slider").width())-parseInt($("#sliderBlock").width())){                      offsetL=parseInt($("#slider").width())-parseInt($("#sliderBlock").width());                                                               }
   $("#sliderBlock").css("left",offsetL);
   ZJ_sldr.callb();
   }
   }
  } 
 ZJ_slider.prototype.moveStop=function(){
  moveStatus=0;
  document.οnmοusemοve="";
  document.οnmοuseup="";
  //document.getElementById("sliderBlock").setAttribute("onmousemove","");
  //document.getElementById("sliderBlock").setAttribute("onmouseup","");
  } 
 
 //ZJ_slider.prototype.getSliderBlockPosition=function (e){
 function getSliderBlockPosition(e){
    var l=e.offsetLeft;
    var t=e.offsetTop;
    while(e=e.offsetParent) {
       t+=e.offsetTop;
       l+=e.offsetLeft;
       }
   return l; 
 } 
 ZJ_slider.prototype.setPoint=function (p){
  if (p>ZJ_slider.sliderMax){p=ZJ_slider.sliderMax}
  if(p<ZJ_slider.sliderMin){p=ZJ_slider.sliderMin}
  p=p-this.sliderMin;
  p=Math.floor(parseInt(parseInt(p)*(parseInt($("#slider").width())-parseInt($("#sliderBlock").width()))/parseInt(this.sliderMax-this.sliderMin)));
  $("#sliderBlock").css("left",p);
  this.callb();
  }
 ZJ_slider.prototype.callb=function (){
  eval(this.callback+"("+this.getPoint()+")");
  }
 
 
function ccs(x){
 $("#re").html("当前值为:"+x);
 }
var s=new ZJ_slider("x1");
    s.initPoint=100;//初始位置
 s.step=10;//左右移动时的步进值
 s.oName="s";//实例名称
 s.sliderMin=50;
 s.callback="ccs";//回调函数名称
 s.init();//初始化
 ZJ_sldr=s;//这句是必须要的,不然会出错,ZJ_sldr=你定义的实例名称,如这里的s=new ZJ_slider的s
 
</script>

</body>
</html>