您的位置：首页 > 运维架构

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

2011-12-21 16:16 621 查看


需要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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航