ie 与 ff js 兼容。

webbwebwew 2009-03-23 03:00:02

这些代码在ie下可以，但不能在ff下正常。还望指点

<html>
<head>
<style>
#left,#right{
width:300px;
float:left;
border:1px solid #000;
height:400px;
}
#bar{
float:left;
width:10px;
height:400px;
background:#000;
}
</style>
</head>
<body>
<div id="left">left DIV</div>
<div id="bar"></div>
<div id="right">right DIV</div>
</body>
<script language="javascript" type="text/javascript">
var l = document.getElementById("left");
var r = document.getElementById("right");
var bar = document.getElementById("bar");
var move=false;
var offsetL,offsetR,LlastWidth,RlastWidth;
var leftL = getLeft( l );
var rightL = getLeft( r ) + r.offsetWidth;
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
bar.onmouseover=function(){
this.style.cursor = "col-resize";
}
bar.onmouseout=function(){
this.style.cursor = "default";
}
bar.onmousedown=function(e){

move=true;
e= e || window.event;
if(ff)
{
var mousePos =mouseCoords(e);
//layerX鼠标位置。
offsetL = e.clientX - mousePos.x;
offsetR = this.offsetWidth - offsetL;
/*
if(document.documentElement.scrollTop > 0)
{
y = evt.layerY - document.documentElement.scrollTop;
}
if(document.documentElement.scrollLeft > 0)
{
x = evt.layerX - document.documentElement.scrollLeft;
}
*/
}
if(ie)
{
this.setCapture();
offsetL = e.offsetX;
offsetR = this.offsetWidth - offsetL;
}

}

bar.onmousemove=function(e){
if(move == false) return;
e= e || window.event;
var mX = e.x ? e.x : e.pageX;
var mousePos =mouseCoords(e);
left.style.width = mousePos.x - leftL - offsetL + "px";
right.style.width = rightL - mousePos.x - offsetR + "px";

}
bar.onmouseup = function(){
this.releaseCapture();
move = false;
}
function getLeft(e)
{
if(!e)e=window.event;
var l = e.offsetLeft;
while(e=e.offsetParent)l+=e.offsetLeft;
return l;
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>
</html>

...全文

131 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

wz_307 2009-03-24

打赏
举报

如果ie下正常而ff不行的话.感觉应该是你通过id索引元素出现问题.

用document.getElementById("barDiv")

zhongasen 2009-03-24

打赏
举报

問問題，這樣貼代碼也行？
要回答的人看累來呀？

浴火_凤凰 2009-03-24

打赏
举报

我这里测试FF没有问题啊！！！

huing 2009-03-23

打赏
举报

上面的代码还是有问题的，需要你自己仔细调整。

huing 2009-03-23

打赏
举报

这是一个加载网页顺序的问题，你的方法是加载文件的时候先执行javascript了，完全找不到这几个div的，div的值要在onload方法里才可以获取到。

huing 2009-03-23

打赏
举报

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<TITLE> New Document </TITLE>
<style>
#leftDiv,#rightDiv{
width:300px;
float:left;
border:1px solid #000;
height:400px;
}
#barDiv{
float:left;
width:10px;
height:400px;
background:#000;
}
</style>
<script type="text/javascript">

function onLoadPage()
{
var l = document.getElementById("leftDiv");
var r = document.getElementById("rightDiv");
var bar = document.getElementById("barDiv");
var move=false;
var offsetL,offsetR,LlastWidth,RlastWidth;
var leftL = getLeft(l);

alert("l=" + l);
var rightL = getLeft(r) + r.offsetWidth;
var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE
var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
bar.onmouseover=function(){
this.style.cursor = "col-resize";
}
bar.onmouseout=function(){
this.style.cursor = "default";
}
bar.onmousedown=function(e){

move=true;
e= e || window.event;
if(ff)
{
var mousePos =mouseCoords(e);
//layerX鼠标位置。
offsetL = e.clientX - mousePos.x;
offsetR = this.offsetWidth - offsetL;
/*
if(document.documentElement.scrollTop > 0)
{
y = evt.layerY - document.documentElement.scrollTop;
}
if(document.documentElement.scrollLeft > 0)
{
x = evt.layerX - document.documentElement.scrollLeft;
}
*/
}
if(ie)
{
this.setCapture();
offsetL = e.offsetX;
offsetR = this.offsetWidth - offsetL;
}

}

bar.onmousemove=function(e){
if(move == false) return;
e= e || window.event;
var mX = e.x ? e.x : e.pageX;
var mousePos =mouseCoords(e);
var left = document.getElementById("leftDiv");
var right = document.getElementById("rightDiv");
left.style.width = mousePos.x - leftL - offsetL + "px";
right.style.width = rightL - mousePos.x - offsetR + "px";

}
bar.onmouseup = function(){
this.releaseCapture();
move = false;
}
function getLeft(leftDiv)
{
var divLeft = document.getElementById("leftDiv");

var l = divLeft.offsetLeft;
alert(l);
while(divLeft=divLeft.offsetParent)l+=divLeft.offsetLeft;
return l;
}
function mouseCoords(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
}

function testClick()
{
var divTest = document.getElementById("test");
alert("divTest="+divTest);
}
</script>
</HEAD>

<BODY onLoad="onLoadPage();">
<table>
<tr>
<td>
<div id="leftDiv">left DIV </div>
<div id="barDiv"> </div>
<div id="rightDiv">right DIV </div>
</td>
</tr>
<tr><td><a href="#" onClick="testClick();"> <div id="test">for the test</div></a></td></tr>
</table>
</BODY>
</HTML>