急高手请帮忙,放大镜效果IE和firefox兼容有关问题
日期：2014-05-17 浏览次数：20812 次
急,高手请帮忙,放大镜效果IE和firefox兼容问题，
这里是代码，兼容效果在http://www.giftour.com/test/1.html可以看到
<!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>无标题文档</title>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0}
#smallbox{border:1px #ffffff solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #ccc solid;width:0px;height:0px;background:url(images/2.jpg) no-repeat;}
#view{border:1px #ccc solid;width:0px;height:0px;position:absolute}
-->
</style>
<script language="JavaScript">
<!--
var srcX = 2000;
var srcY = 2000;
var bigX = 290;
var bigY = 290;
var smallX = 290;
var smallY = 290;
var viewX = bigX / srcX * smallX;
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;
var border = 1;
window.onload=function (){
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
smallpic.width=smallX;
smallpic.height=smallY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;
}
function otherImages(images290,images2000)
{
var obj290 = document.getElementById('smallpic');
obj290.src=images290;
bigbox.style.background="url("+images2000+")";
}
displayDIV('');
function displayDIV(viewStyle)
{
bigbox.style.display=viewStyle;
view.style.display=viewStyle;
}
//-->
</script>
<body>
<div id="smallbox"><img id="smallpic" src="images/1.jpg" border="0" onmousemove="move(event)" onmouseover="displayDIV('')" onmouseout="displayDIV('none')" /></div>
<div id="bigbox"></div>
<div><img src="images/1.jpg" width="120" height="120" align="left" onmousemove="otherImages('images/1.jp
这里是代码，兼容效果在http://www.giftour.com/test/1.html可以看到
<!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>无标题文档</title>
</head>
<style type="text/css">
<!--
*{padding:0;margin:0}
#smallbox{border:1px #ffffff solid;float:left;width:0;height:0;overflow:hidden}
#bigbox{border:1px #ccc solid;width:0px;height:0px;background:url(images/2.jpg) no-repeat;}
#view{border:1px #ccc solid;width:0px;height:0px;position:absolute}
-->
</style>
<script language="JavaScript">
<!--
var srcX = 2000;
var srcY = 2000;
var bigX = 290;
var bigY = 290;
var smallX = 290;
var smallY = 290;
var viewX = bigX / srcX * smallX;
var viewY = bigY / srcY * smallY;
var bl = srcX / smallX;
var border = 1;
window.onload=function (){
bigbox.style.borderWidth=border;
bigbox.style.width=bigX+border*2;
bigbox.style.height=bigY+border*2;
smallpic.width=smallX;
smallpic.height=smallY;
view.style.width=viewX;
view.style.height=viewY;
smallbox.style.borderWidth=border;
if (window.event){
smallbox.style.width=smallpic.offsetWidth+border*2;
smallbox.style.height=smallpic.offsetHeight+border*2;
}else{
smallbox.style.width=smallpic.offsetWidth;
smallbox.style.height=smallpic.offsetHeight;
}
move(event);
}
function move(e){
var e = window.event?window.event:e;
var iebug = 0;
if (window.event){
var vX = e.offsetX - viewX/2;
var vY = e.offsetY - viewY/2;
}else{
var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;
var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;
iebug = 2;
}
if (vX < 0) vX = 0;
if (vY < 0) vY = 0;
if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;
if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;
view.style.left = vX + smallbox.offsetLeft + border;
view.style.top = vY + smallbox.offsetTop + border;
bigbox.style.backgroundPosition= - vX * bl + " " + -vY * bl;
}
function otherImages(images290,images2000)
{
var obj290 = document.getElementById('smallpic');
obj290.src=images290;
bigbox.style.background="url("+images2000+")";
}
displayDIV('');
function displayDIV(viewStyle)
{
bigbox.style.display=viewStyle;
view.style.display=viewStyle;
}
//-->
</script>
<body>
<div id="smallbox"><img id="smallpic" src="images/1.jpg" border="0" onmousemove="move(event)" onmouseover="displayDIV('')" onmouseout="displayDIV('none')" /></div>
<div id="bigbox"></div>
<div><img src="images/1.jpg" width="120" height="120" align="left" onmousemove="otherImages('images/1.jp
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
