需要jquery库支持
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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:/%D4%FA%BF%A1/blog///postqustion:/%D4%FA%BF%A1/blog/item/c5fd23d3a7febb1e3bf3cf7d.htmlfunction 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.userAgentua=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>
![一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera_导航菜单](https://1200zi.500zi.com/uploadfile/img/14/556/c0f1c0798bb685e1ca2a6e04d8c51c93.jpg)
![[06月]远远的目标：迈向一生的远方](https://1200zi.500zi.com/uploadfile/img/2024/06/10/255b07975960d134da74b72bd37a288c.jpg)
![[06月]回忆童年：1200字作文素材盘点](https://1200zi.500zi.com/uploadfile/img/2024/06/10/4b77421012e6a44fbff1b81ab566ceca.jpg)
![[06月]国贸实训总结 1200字](https://1200zi.500zi.com/uploadfile/img/2024/06/10/952fcbbb5230d56de100926df50695b4.jpg)
