ie和firefox上都运行流畅的网页分割条

这两天因工作需要做了一个网页分割条,期间碰到不少问题,好在最后都解决了,最后
版本在ie8和firefox3.5上都能流畅运行,现总结一下:

1. 拖动分割条的一个问题是要把鼠标的移动和释放事件不间断地捕获到并进行处理,当
鼠标快速移动时,要保证即使鼠标移出了分割条,进入页面其他元素的范围内,这些事
件也能被捕获到并进行相应的处理。在ie中,这需要使用setCapture()方法,拖动动作
完成后还要用releaseCapture()方法释放。但firefox不支持该方法,网上有的说可以
用window.captureEvents方法,但我在firefox中试过也不行,找了找资料据说这是
netscape的特性,firefox只实现了一个空的方法,并不起作用。firefox解决这一问题
的办法是按下分割条后,就将鼠标移动和释放的事件处理方法绑定到document上,然后
在鼠标释放的时候再进行移除。

2. 拖动分割条中碰到的第二个问题是,在firefox中,拖动很容易中断,可能是因为一
旦鼠标移出了分割条,相应的鼠标事件在某些情况下会被页面中的其他元素截留,这个
问题可以通过event的preventDefault()方法解决。

最后代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style>
.shadowDivA {
overflow: scroll;
width: 200px;
height: 100%;
position: absolute;
top: 0px ; left : 0px;
background-color: yellow;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivB {
overflow: scroll;
width: 500px;
height: 100%;
position: absolute;
top: 0px ; left : 205px;
background-color: blue;
filter: alpha(opacity = 70);
opacity: 0.7;
}
.shadowDivM {
width: 5px;
height: 100%;
position: absolute;
top: 0px ; left : 200px;
background-color: grey;
cursor:e-resize;
filter: alpha(opacity = 70);
opacity: 0.7;
}
</style>
<script type="text/javascript">
var flag = false ;
var objSplitter = false;

function down(event, obj){
if(!flag){
if(obj.setCapture)
obj.setCapture();
else {
document.addEventListener('mouseup', up, true);
document.addEventListener('mousemove', move, true);
event.preventDefault();
}

flag = true ;
objSplitter = obj;
}
}

function up(event){
if(flag){
if(objSplitter.releaseCapture)
objSplitter.releaseCapture();
else {
document.removeEventListener('mouseup', up, true);
document.removeEventListener('mousemove', move, true);
event.preventDefault();
}

flag = false ;
}
}

function move(event){
if(flag){
var obj1 = document.getElementById("a") ;
var obj2 = document.getElementById("b") ;
obj1.style.width = event.clientX + "px" ;
obj2.style.left = (event.clientX + 5) + "px" ;
obj2.style.width = (700 - event.clientX) + "px" ;

objSplitter.style.left = event.clientX + "px" ;
if(!objSplitter.releaseCapture) {
event.preventDefault();
}
}
}
</script>
</head>

<body>
<div id="a" class="shadowDivA">
</div>
<div class="shadowDivM" onmousedown="down(event, this);" onmouseup="up(event);" onmousemove="move(event);">
</div>
<div id="b" class="shadowDivB">
</div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值