jquery: JS淘宝网产品图片局部放大代码
实例:
<!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=gb2312" /> <title>JS淘宝网产品图片局部放大代码在线演示</title> <script type="text/javascript" src="js/mzp-packed.js"></script> <link href="css/zzsc.css" type="text/css" rel="stylesheet"> <link href="css/magiczoomplus.css" type="text/css" rel="stylesheet"> </head> <body> <!-- 代码开始 --> <div class="box"> <div class="left-pro"> <div class="t1"> <img src="images/gotop.gif" id="gotop" /> <div id="showArea"> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> <a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> <a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a> <a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a> <a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a> </div> <img src="images/gobottom.gif" id="gobottom" /> </div> <div class="t2"> <a href="images/img01.jpg" id="zoom1" class="MagicZoom MagicThumb"><img src="images/img01.jpg" id="main_img" class="main_img" style="width:400px; height:400px;" /></a> </div> </div> </div> <div style="clear:both;"></div> <script type="text/javascript" src="js/zzsc.js"></script> <!-- 代码结束 --> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div> </body> </html>