仿淘宝详细页面图片放大镜的制作过程

1 在jsp页面引入放大镜的js（jquery.imagezoom.min.js）
2 在jsp页面引入放大镜的css
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("http://demo.lanrenzhijia.com/2015/jqzoom0225/images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}
3 在jsp页面写好鼠标移动触发的函数调用放大镜的js
  /* 放大镜 */     
     function info(){
   $(".jqzoom").imagezoom(); 
   }
4 在js中动态生成html文件
                  var main_picture = Array();
                  main_picture.push("<li class='slides_li'>");
             main_picture.push("<img src= '"+mainpiture+"'alt='图片' rel='"+mainpiture+"' class='jqzoom' οnmοuseοver= 'info()' >");
             main_picture.push("</li>");
             $("#goodsPicture").html("");
             $("#goodsPicture").html(main_picture.join(""));
             
             
  二，           
 如果是在页面直接调用图片的话就不用鼠标移动事件
 直接调用这个函数就可以了
  <div class="tb-booth tb-pic tb-s310">
  <a href="images/01.jpg"><img src="http://demo.lanrenzhijia.com/2015/jqzoom0225/images/01_mid.jpg" alt="美女" rel="http://demo.lanrenzhijia.com/2015/jqzoom0225/images/01.jpg" class="jqzoom" /></a>
 </div>
 
 
 $(function(){
  $(".jqzoom").imagezoom(); 
 });            

项目源码（仿造淘宝详细页面放大镜.rar）文件