<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
text-align:center;
}
#small{
margin-top:40px;
}
#showBig{
position:absolute;
display:none;
}
</style>
<!--引入jQuery库-->
<script type="text/javascript" src="../lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function(event){
if(event.type=="mouseover"){
$("#showBig").show();
}
else if(event.type=="mouseout"){
$("#showBig").hide();
}
else if(event.type=="mousemove"){
$("#showBig").offset({
left: event.pageX+50,
top: event.pageY+50
});
}
});
});
</script>
</head>
<body>
<img id="small" src="../img/small.jpg">
<div id="showBig">
<img src="../img/big.jpg" width="300px" height="300px">
</div>
</body>
</html>