The example in this article describes the method that jquery implements to magnify the image of Taobao. Share to everyone for your reference. The implementation method is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " > <title> similar to Taobao picture amplification code </title> <script type= "Text/javascript" src= "Js/jquery1.3.2.js" ></ script> <style type= "Text/css" > #tip {position:absolute;color: #333;d isplay:none;} #tip s {position:absolute; Top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #
BBA Transparent transparent;border-style:dashed solid dashed dashed;border-width:10px; #tip s I {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;
Border-color:transparent #fff Transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;} #tip. T_box {position:relative;background-color: #CCC; Filter:alpha (opacity=50);-moz-opacity:0.5;bottom:-3px;right
: -3px;} #tip. T_box Div {position:relative;background-color: #FFF; border:1px solid #ACA899 background: #FFF;p adding:1px;top:-3px;left:-3px;} . tip {width:82px;height:82px;border:1px solid #DDD;} </style> <script type= ' Text/javascript ' > $ (function ( {$ ('. Tip '). MouseOver (function () {var $tip =$ (' <div id= tip "><div class=" T_box "><div><s>
<i></i></s></div></div></div>");
$ (' body '). Append ($tip);
$ (' #tip '). Show (' fast ');
}). mouseout (function () {$ (' #tip '). Remove (); }. MouseMove (function (e) {$ (' #tip '). CSS ({"Top":(e.pagey-60) + "px", "left":(e.pagex+30) + "px"})}) </script> & lt;p> </p> <a href= "/" ></a> <a href = "#" ></a> <a "#" href= ></a>
I hope this article will help you with your jquery programming.