您的位置：首页 > Web前端 > JavaScript

js自定义滚动条完美兼容ff，IE

2013-04-24 17:39 260 查看 
<!doctype html>
<html>
<head>

<style type="text/css">
.f{ height:500px; width:20px; background:#CCC; position:absolute; top:100px; left:458px;*top:15px}
.z{ height:50px; position:absolute; width:20px; background:#F00;}
.div{ width:0; height:0; background:#969; margin:100px; height:500px; width:350px; overflow:hidden; position:relative}
.txt{ line-height:20px; color:#FFFFFF; font-size:12px; padding:10px; width:330px; position:absolute; word-break:break-all}

</style>
</head>
<body>

<div class="f" id="f"><div class="z" id="z"></div></div>
<div class="div" id="box">
<div id="txt" class="txt">

就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！就应该换CEO了，库克上任以后发布的产品都让大家大跌眼镜！苹果公司业绩下滑！这样又使一些顾客对苹果公司失去了信心，很难相信再生产出好产品！苹果公司唯一解救当前的僵局就只有替换CEO了！

</div>
</div>

<script type="text/javascript">
/***************
//自定义滚动条
//支持横向和纵向
//time：2013-4-1
***************/
scrollBar({
scrollBarBox:"f",//滑块容器id
scrollBar:"z",//滑块id
txtBox:"box",//滑动文本的展示id
scrollTxtBox:"txt",//滑动文本的容器id
direction:"longitudinal"//滑动条方向,横向：transverse，纵向：longitudinal
});

function scrollBar(obj){
var zbox=document.getElementById(obj.scrollBar);
var fbox=document.getElementById(obj.scrollBarBox);
var rbox=document.getElementById(obj.txtBox);
var tbox=document.getElementById(obj.scrollTxtBox);
var Cbox_w=zbox.offsetWidth;
var Pbox_w=fbox.offsetWidth;
var Cbox_h=zbox.offsetHeight;
var Pbox_h=fbox.offsetHeight;
var tbox_h=tbox.offsetHeight;
var rbox_h=rbox.offsetHeight;
var mX,mY,marleft,martop,boxX,boxY;
zbox.onmousedown=function(e){
var eve=e||window.event;
boxX=zbox.offsetLeft;
boxY=zbox.offsetTop;
mX=eve.clientX-boxX;
mY=eve.clientY-boxY;
if(zbox.setCapture){
zbox.setCapture();
}else{

window.captureEvents(Event.MOUSEMOVE);
}
eve.cancelBubble = true;//阻止事件冒泡，防止冲突
document.onmousemove=function(e){
var eve=e||window.event;
marleft=eve.clientX-mX;
martop=eve.clientY-mY;
if(obj.direction=="longitudinal"){
if( martop<0){
martop=0;
}
if( martop>Pbox_h-Cbox_h){
martop=Pbox_h-Cbox_h;
}
zbox.style.top=martop+"px";
tbox.style.top=-(tbox_h-rbox_h)*(martop/(Pbox_h-Cbox_h))+"px";
}else{

if( marleft<0){
marleft=0;
}
if( marleft>Pbox_w-Cbox_w){
marleft=Pbox_w-Cbox_w;
}
zbox.style.left=marleft+"px";
tbox.style.top=-(tbox_h-rbox_h)*(marleft/(Pbox_w-Cbox_w))+"px";

}

}
document.onmouseup=function(){

if(zbox.releaseCapture){
zbox.releaseCapture();

}else{

window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
document.onmousemove=null;
document.onmouseup=null;
}

return false;

}

}

</script>

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