<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<script language= "javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></ Script>
<script language= "JavaScript" >
$ (function () {
var offsetx=20-$ ("#imgtest"). Offset (). Left;
var offsety=20-$ ("#imgtest"). Offset (). Top;
var size=1.2*$ (' #imgtest ul li img '). width ();
$ ("#imgtest ul Li"). MouseOver (function (event) {
var $target =$ (Event.target);
if ($target. Is (' img '))
{
$ ("<img id= ' tip ' src= '" + $target. attr ("src") + "' >"). css ({
"Height": size,
"width": size,
"Top": Event.pagex+offsetx,
"Left": event.pagey+offsety,
}). Appendto ($ ("#imgtest"));
}
}). mouseout (function () {
$ ("#tip"). Remove ();
}). MouseMove (function (event) {
$ ("#tip"). CSS (
{
"Left": Event.pagex+offsetx,
"Top": event.pagey+offsety
});
});
})
</script>
<style type= "Text/css" >
img{height:262px; width:400px position:absolute; border:5px solid #FFF;
#imgtest {height:auto;width:840px; margin:0 auto; position:absolute;}
#imgtest ul{position:relative;width:840px; Height:auto background: #00F;}
#imgtest ul li{position:relative; height:276px width:410px; list-style:none; float:left; margin:3px; border:1px Solid 999;}
</style>
<body>
<div id= "Imgtest" >
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
