在做图片反弹之前，我心中的理念是：只要理论通了，那么问题都好解决，做了图片反弹之后我的理念是：不管白猫还是黑猫，抓到老鼠就是好猫。
首先，在做图片反弹之前，我通过搜索，得到资料整理如下：
1. 浏览器模式有两种document.compatMode
a. BackCompat 这种叫怪异模式,ie是这种类型document.body.clientWidth
b.CSS1Compa标准模式,Gecko内核的浏览器,比如火狐 document.documentElement.clientWidth
2.PageXoffset只是支持网景浏览器，对火狐和ie并不支持。 （这个还是官放网站查的，感觉非常肯定）
按照上面的理论，对于ie和火狐的话，我 们只需要判断是哪种模式的浏览器，然后使用相应的代码就可以，但是测试是火狐对document.documentElement.clientWidth显示是一直为零的，反倒是对document.body.clientWidth支持很好，而且因为网景和火狐属于同一内核，所以对PageXoffset是支持的（猜想，测试果然是这样），但是这就违背了官方网站的理论，那什么官方网站现在居然找不出来了，有点郁闷。
这里贴一个支持，火狐，ie5.5 到ie8的代码出来，但是支持不支持网景我就不知道，没有测过，不过，根据理论的话，只需要，判断一下属于css1compat就可以，但是理论让我感觉是非常脆弱的~~如果觉得有必要的话，就自己测试咯、
<html>
<head><title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{text-align:center;}
#main{border:red 1px solid;margin:0px auto;}
#showbig{position:absolute;display:none;}
#pic{margin-left:80px;margin-top:600px;}
#pic img{width:60px;height:40px;}
</style>
<script type="text/javascript" language="javascript">
<!--
function showbigpic(e,imgp)
{
var showbig=document.getElementById("showbig")
showbig.innerHTML="<img src='"+imgp.src+"'>"
showbig.style.left=e.clientX+document.body.scrollLeft+"px"
showbig.style.top=e.clientY+document.body.scrollTop+"px"
showbig.style.display="block"
}
function hiddenpic()
{
var showbig=document.getElementById("showbig")
showbig.style.display="none"
}
function display()
{
var showbig=document.getElementById("showbig")
showbig.style.display="block"
}
// -->
</script>
</head>
<body>
<div id="main"><div id="showbig" onmouseover="display()" onmouseout="hiddenpic()"></div>
<div id="pic"><img src="http://images.cnblogs.com/cnblogs_com/yike/1.jpg" alt="鼠标放上来显示大图" onmouseover="showbigpic(event,this)" onmouseout="hiddenpic()">
<img src="http://images.cnblogs.com/cnblogs_com/yike/2.jpg" alt="第二张图" onmouseover="showbigpic(event,this)" onmouseout="hiddenpic()"></div>
</div>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
</body>
</html>
这里有个问题：火狐对event.clientX 不支持(ie是支持的),但是这里我们通过传两个参数实现了我也不知道为什么？这个传参数的方法我是在网上找的，但是作者也是没有给出理由
最终的痛苦是：到底是理论重要，还是实践重要。
首先，在做图片反弹之前，我通过搜索，得到资料整理如下：
1. 浏览器模式有两种document.compatMode
a. BackCompat 这种叫怪异模式,ie是这种类型document.body.clientWidth
b.CSS1Compa标准模式,Gecko内核的浏览器,比如火狐 document.documentElement.clientWidth
2.PageXoffset只是支持网景浏览器，对火狐和ie并不支持。 （这个还是官放网站查的，感觉非常肯定）
按照上面的理论，对于ie和火狐的话，我 们只需要判断是哪种模式的浏览器，然后使用相应的代码就可以，但是测试是火狐对document.documentElement.clientWidth显示是一直为零的，反倒是对document.body.clientWidth支持很好，而且因为网景和火狐属于同一内核，所以对PageXoffset是支持的（猜想，测试果然是这样），但是这就违背了官方网站的理论，那什么官方网站现在居然找不出来了，有点郁闷。
这里贴一个支持，火狐，ie5.5 到ie8的代码出来，但是支持不支持网景我就不知道，没有测过，不过，根据理论的话，只需要，判断一下属于css1compat就可以，但是理论让我感觉是非常脆弱的~~如果觉得有必要的话，就自己测试咯、
<html>
<head><title></title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{text-align:center;}
#main{border:red 1px solid;margin:0px auto;}
#showbig{position:absolute;display:none;}
#pic{margin-left:80px;margin-top:600px;}
#pic img{width:60px;height:40px;}
</style>
<script type="text/javascript" language="javascript">
<!--
function showbigpic(e,imgp)
{
var showbig=document.getElementById("showbig")
showbig.innerHTML="<img src='"+imgp.src+"'>"
showbig.style.left=e.clientX+document.body.scrollLeft+"px"
showbig.style.top=e.clientY+document.body.scrollTop+"px"
showbig.style.display="block"
}
function hiddenpic()
{
var showbig=document.getElementById("showbig")
showbig.style.display="none"
}
function display()
{
var showbig=document.getElementById("showbig")
showbig.style.display="block"
}
// -->
</script>
</head>
<body>
<div id="main"><div id="showbig" onmouseover="display()" onmouseout="hiddenpic()"></div>
<div id="pic"><img src="http://images.cnblogs.com/cnblogs_com/yike/1.jpg" alt="鼠标放上来显示大图" onmouseover="showbigpic(event,this)" onmouseout="hiddenpic()">
<img src="http://images.cnblogs.com/cnblogs_com/yike/2.jpg" alt="第二张图" onmouseover="showbigpic(event,this)" onmouseout="hiddenpic()"></div>
</div>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
<br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/><br/><br/> <br/><br/>
</body>
</html>
这里有个问题：火狐对event.clientX 不支持(ie是支持的),但是这里我们通过传两个参数实现了我也不知道为什么？这个传参数的方法我是在网上找的，但是作者也是没有给出理由
最终的痛苦是：到底是理论重要，还是实践重要。
