Today, I used JQuery to simulate this effect.
The source code is as follows:
Copy codeThe Code is as follows:
<Head>
<Script type = "text/javascript" src = "Js/jquery-1.4.1.js"> </script>
<Script type = "text/javascript">
// Assume that data is obtained from the database.
Var data = {"images/1_small.jpg": ["images/1_big.jpg", "lingerie girl", "starring: Wen yongshan, Zheng Lixin"], "images/2_small.jpg ": ["images/2_big.jpg", "Love trap", "starring: Yan Xun, Cai Lin"], "images/3_small.jpg": ["images/3_big.jpg", "source code ", "Starring: Justin, Christian"]};
$ (Function (){
$. Each (data, function (key, value ){
Var smallimg = $ (" ");
Smallimg. attr ("bigmappath", value [0]);
Smallimg. attr ("personname", value [1]);
Smallimg. attr ("personheight", value [2]);
Smallimg. mouseover (function (e ){
$ ("# DetailImg"). attr ("src", $ (this). attr ("bigmappath "));
$ ("# DetailHeight"). text ($ (this). attr ("personheight "));
$ ("# DetailName"). text ($ (this). attr ("personname "));
$ ("# Details" detail .css ("top", e.pagey).css ("left", e.pagex).css ("display ","");
});
$ ("Body"). append (smallimg );
});
});
</Script>
</Head>
<Body>
<Div style = "display: none; position: absolute;" id = "details">
<P id = "detailHeight"> </p>
<P id = "detailName"> </p>
</Div>
</Body>
Move the mouse over the thumbnail as shown below