This article presents a preview of the example for jquery implementation, when the mouse is put up to show the actual size, interested friends can learn under
The 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>jquery picture preview-jquery Online demo-jquery learning </title> <link href=" http:// Www.jquery001.com/css/Stylesheet_min.css "rel=" Stylesheet "type=" Text/css "/> <script type=" text/ JavaScript "src=" Http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js ></script> < Style type= "Text/css" > img { border:none; } UL, li { margin:0 ; padding:0; } li { list-style:none; float:left; Display:inlin e; margin-right:10px; } #imglist img { width:150px; Height:120px;&nbs P } #imgshow { position:absolute; border:1px solid #ccc; background: #333; padding:5px; Colo R: #fff; display:none; } </style> <script type= "Text/javascript" > var ShowImage = function () { Xoffset = 10; Yoffset = 30; $ ("#imglist"). FIND ("img"). Hover (function (e) {&nbs P $ ("<img id= ' imgshow ' src= '" + this.src + "'/>"). Appendto ("body"); //Below are two style assignment methods //$ ("#imgshow"). CSS ( "Top", (E.pagey-xoffset) + "px"). CSS (' left ', (E.pagex + yoffset) + "px"). FadeIn ("slow"); $ ("#imgshow"). CSS ({"Top" :(E.pagey-xoffset) + "px", "left":(E.pagex + yoffset) + "px"}). FadeIn ("Slow"); }, function () { $ ("#imgshow") . Remove (); }); }; jQuery (document). Ready (function () { showimage (); }); </script> </head> <body> <div id= "Page-wrap" > <div id= "Content-wrap" > <div id= "Content-left "class=" demo "> <ul id=" imglist "> <li><a> <img src=" http:// g.hiphotos.baidu.com/image/w%3d2048/sign= 0a53d9eca1cc7cd9fa2d33d90d39203f/ 35a85edf8db1cb13efa8fe12df54564e93584bea.jpg "alt=" Picture "/></a></li> <li><a> <img src= "14300000029584127555444098375.jpg" alt= "Pictures"/></a></li> </ul> </ div> </div> </div> </body> </html> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
