ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条
来源：互联网 发布：java 注解 编辑：程序博客网 时间：2024/05/29 18:15
需要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' onclick='"+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' onclick='"+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.onmouseup=this.moveStop; document.onmousemove=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.onmousemove=""; document.onmouseup=""; //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>- ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条
- 兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
- 兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
- Opera、FireFox、IE、Safari中CSS差别及兼容CSS的解决方法
- 兼容IE Firefox Opera 的禁止下载
- 发一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera
- 一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera
- 背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera
- 一个背景变暗的div可拖动提示窗口，兼容IE、Firefox、Opera
- IE、Firefox、Opera和Safari的JavaScript兼容性
- IE Firefox Opera Chrome Safari 对MARQUEE标签的兼容问题
- firefox, chrome, safari, opera, IE 的javascript engine
- CSS 样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
- CSS样式important和*和_:兼容IE、Firefox、Opera和Safari CSS的解决方法及CSS差别
- 兼容 ie，ff，Google，safari，opera 的回车事件
- CSS半透明度设置,兼容Firefox, IE, Chrome, Opera and Safari
- IE、FireFox兼容的拖动DIV
- 为何firefox不支持insertRow和insertCell。我如何能让firefox显示和ie显示的效果一样？iframe实现高度自适应，兼容FF、Opera、Safari
- Activation error occured while trying to get instance of type Database
- F# 3.0 BUILD讲座的示例代码
- Failed to create the Java Virtual Machine
- 挂接命令(mount)
- ALSA驱动、设备函数调用关系
- ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条
- 15.4.2 创建和组合绘图
- 两个局域网的互联
- Js 刷新框架及页面的方法总集
- PDF2SWF Pages 常见问题
- [转]Linux 下给类tcp 通信模式的实现。select 函数
- struts2 iterator标签status属性
- 在Windows Azure中使用Node.js,开启云计算之旅！
- Reversing C++ doc reference
