Original Status:
Mouse:
Copy codeThe Code is as follows: <! 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> 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 implements targetmediaworkflow (event.tar get );
If ($ target. is ('img '))
{
$ ("<Img id = 'tip 'src = '" + $ target. attr ("src") + "'>" example .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: pixel PX; list-style: none; float: left; margin: 3px; border: 1px solid #999 ;}
</Style>
</Head>
<Body>
<Div id = "imgtest">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
</Body>
</Html>
