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

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' onmouseover= '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）文件