ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条

需要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>

ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条相关推荐

[乐意黎原创] JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本
JS根据浏览器的useAgent来判断浏览器的类型. userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. javascript语法:navigator.us ...
怎么实现在FireFox IE Opera Safari 都可以正常播放WMV和MOV的网页播放器代码
最近要做一个网页播放器的代码,用户需要在FireFox , IE , Opera , 甚至苹果下的 Safari 浏览器中都可以正常的播放. 调试了许久发现不加任何播放器属性的Embed标签可以在所有 ...
css hack（ie6-9,firefox,chrome,opera,safari）
来源:http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html 在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适 ...
[JS] - onmusewheel事件(兼容IE,FF,opera,safari,chrome)
来源:http://www.denisdeng.com/?p=685 相信用户在浏览Google Map 时,都注意到向上或向下滚动鼠标可以使地图放大或缩小.其实,对于鼠标滚动我们并不陌生.但要给一个 ...
FireFox IE Opera Safari 都可以正常播放WMV和MOV的网页播放器代码
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> WMV 格式 : < ...
如何检测Safari，Chrome，IE，Firefox和Opera浏览器？
我有5个FF,Chrome,IE,Opera和Safari插件/扩展程序. 如何识别用户浏览器并重定向(一旦单击安装按钮)下载相应的插件? #1楼简单的一行JavaScript代码将为您提供浏览器的 ...
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer
浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的 ...
五大浏览器的历史、差异、对CSS和ES的支持内核：Trident、Gecko、Blink、Webkit 浏览器：IE Opera Safari Firefox Chrome
五大浏览器的历史.差异.对CSS和ES的支持内核:Trident.Gecko.Blink.Webkit 浏览器:IE Opera Safari Firefox Chrome 历史 Internet ...
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器...
[完美]原生JS获取浏览器版本判断--支持Edge,IE,Chrome,Firefox,Opera,Safari,以及各种使用Chrome和IE混合内核的浏览器原文:[完美]原生JS获取浏览器版本判 ...

ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条

ZJ_slider兼容Firefox,IE,Opera,Safari的滑动条,拖动条相关推荐

最新文章

热门文章