弹出层有关问题,除了ie外,好像 event.clientX无效
日期：2014-05-16 浏览次数：20340 次
弹出层问题,除了ie外,好像 event.clientX无效
写了个简单的鼠标悬停显示大图的代码,发现在firebox下有问题!
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "1.JPG " onmousemove= "showTip() " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "2.JPG ">
</div>
</BODY>
</HTML>
应该怎么修改?同时要兼容ie和ff,现在ff的显示效果就是div3正好就在1.jpg的下方,没有获得event.clientX Y的值
------解决方案--------------------
ie以外用e.pageX
------解决方案--------------------
汗水嗒嗒
要判断浏览器的啊
还要根据浏览器的不同用不同的事件模型
------解决方案--------------------
function showTip(e){
event = window.event || e;
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
在FIREFOX中,ENENT要显示的传给函数
onmousemove= "showTip(event) "
------解决方案--------------------
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(e){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=e.clientX;
div3.style.top=e.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "m05.gif " onmousemove= "showTip(event) " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "m05_.gif ">
</div>
</BODY>
</HTML>
这样看看
写了个简单的鼠标悬停显示大图的代码,发现在firebox下有问题!
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "1.JPG " onmousemove= "showTip() " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "2.JPG ">
</div>
</BODY>
</HTML>
应该怎么修改?同时要兼容ie和ff,现在ff的显示效果就是div3正好就在1.jpg的下方,没有获得event.clientX Y的值
------解决方案--------------------
ie以外用e.pageX
------解决方案--------------------
汗水嗒嗒
要判断浏览器的啊
还要根据浏览器的不同用不同的事件模型
------解决方案--------------------
function showTip(e){
event = window.event || e;
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
在FIREFOX中,ENENT要显示的传给函数
onmousemove= "showTip(event) "
------解决方案--------------------
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(e){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=e.clientX;
div3.style.top=e.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "m05.gif " onmousemove= "showTip(event) " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "m05_.gif ">
</div>
</BODY>
</HTML>
这样看看
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
