<!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>
<script src="jquery-1.7.js" type="text/javascript">
</script>
<style type="text/css">
#xiaokuang{position:absolute;
width:100px;
height:100px;
left:0px;
top:0px;
background:rgba(254,238,167,.4);
display:none;
}
#datu{
position:absolute;
width:400px;
height:400px;
background-color: #999900;
left:400px;
top:0px;
display:none;
overflow: hidden;
}
</style>
<script>
$(document).ready(function(){
$("#xiaotu").mouseover(
function(){
// $("#xiaokuang").css('display','block');
$("#xiaokuang").show();
$("#datu").show();//该方法放到mousemove里会出错，不能不停的show
}
);
$("#xiaotu").mouseout(
function(){
// $("#xiaokuang").css('display','block');
$("#xiaokuang").hide();
$("#datu").hide();//该方法放到mousemove里会出错，不能不停的show
}
);
$("#xiaotu").mousemove(
function(e){
var x=e.clientX-$("#xiaotu").offset().left-$('#xiaokuang').width()/2;
var y=e.clientY-$("#xiaotu").offset().top-$('#xiaokuang').height()/2;
$("#xiaokuang").css({left:x+'px',top:y+'px'});
if(x<0)
$("#xiaokuang").css("left","0px");
if(x>($('#xiaoimg').width()-$('#xiaokuang').width()))
$("#xiaokuang").css("left",$('#xiaoimg').width()-$('#xiaokuang').width()+"px");
if(y<0)
$("#xiaokuang").css("top","0px");
if(y>($('#xiaoimg').height()-$('#xiaokuang').height()))
$("#xiaokuang").css("top",$('#xiaoimg').height()-$('#xiaokuang').height()+"px");
//不能直接用div xiaotu 宽度，它没有宽度，调用数值会和屏幕宽度等宽
var newx=x*2;
var newy=y*2;
if(newx<0)newx=0;
if(newx>($('#datu img').width()-$('#datu').width()))newx=$('#datu img').width()-$('#datu').width();
if(newy<0)newy=0;
if(newy>($('#datu img').height()-$('#datu').height()))newy=$('#datu img').height()-$('#datu').height();
$('#datu img').css("margin-left",-newx+'px');
$('#datu img').css("margin-top",-newy+'px');
$("#mydebug").html($('#datu img').width()-$('#datu').width()+" "+"newx"+newx+"newy"+newy+"e.clientX"+e.clientX+"$('#xiaotu').offset().top"+$("#xiaotu").offset().left+"$('#xiaokuang').width()/2"+$('#xiaokuang').width()/2+"$('#xiaotu').width()"+$('#xiaotu').width());
}
);
});
//实验证明，只写mouseover不写document ready是不能生效的。 .mouseover括号结尾不写分号也是不能生效的
</script>
</head>
<body>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="150"> </td>
</tr>
</table>
<div id="xiaotu" style="position:relative"><img src="s2.jpg" width="400" height="250" id="xiaoimg" /><div id="xiaokuang"></div><div id="datu"><img src="s1.jpg" width="800" height="500" /></div></div>
<div id="mydebug" style="height:200px; width:400px;"></div>
</body>
</html>
