.newDiv{ 
    width:100px; 
    height:100px; 
    border:1px solid #EEE; 
    position:absolute; 
    background:#fff; 
    filter:alpha(opacity=40); 
    opacity:0.4; 
    z-index:2; 
    display:none; 
    cursor:move; 
} 
.see_info{ 
    width:400px; 
    height:400px; 
    position:absolute; 
    top:0px; 
    left:500px; 
    z-index:2; 
    display:none; 
} 
 
 
 
需导入jquery库文件. 
  
  
  

/**
* jquery 淘宝商城放大镜
* by www.
*/
$(function(){                 
        $(".thumb").hover(function(){ 
                $(".newDiv").show(); 
                $(".see_info").show(); 
                //获得图片原始图对象 
            var phObj=$(".img_hide"); 
            var s=phObj.attr("src");     
            var str =s.split("\"); 
            var img=str.join(); 
            $(".see_info").css("background","url("/blog_article/img/index.html") no-repeat"); 
                //获取大图与小图的比例 
                var perX=phObj.width()/$(".pic").width(); 
                var perY=phObj.height()/$(".pic").height(); 
            $(this).mousemove(function(e){ 
                 
                //判断鼠标在图片上的位置 
                var pX=e.pageX-$(this).offset().left; 
                var pY=e.pageY-$(this).offset().top; 
                //获取大图应该的位置 
                var bigX=pX*perX-$(".see_info").width()/2; 
                var bigY=pY*perY-$(".see_info").height()/2; 
                 
                //获取小图的top 
                var tT=$(this).offset().top; 
                var tL=$(this).css("left"); 
                 
                //让鼠标在div中间 
                var top=e.pageY-$(".newDiv").height()/2; 
                //让鼠标在div中间 
                var left=e.pageX-$(".newDiv").width()/2;
                 
                //最大高度 
                var div_max_top=parseInt($(this).offset().top)+parseInt($(this).height())-$(".newDiv").height(); 
                 
                //最低高度 
                var div_min_top=$(this).offset().top; 
                //最大宽度 
                var div_max_left=parseInt($(this).offset().left)+parseInt($(this).width())-$(".newDiv").width(); 
                //最小宽度 
                var div_min_left=$(this).offset().left; 
                 
                if(top=div_max_top){ 
                    top=div_max_top; 
                } 
                if(left=div_max_left){ 
                    left=div_max_left;   
                } 
                 
                //设置鼠标图div的位置 
                $(".newDiv").css({ 
                    "top":+top+"px", 
                    "left":+left+"px" 
                });  www.
                //设置大图图位置 
                $(".see_info").css({ 
                    "background-position":+-bigX+"px"+" "+-bigY+"px" 
                });                 
            }); 
        }, function(){ 
            //隐藏div 
            $(".see_info").hide(); 
            $(".newDiv").hide();     
        });     
 });