放大图看细节

<div class="image"><img src="car.jpg"></div>
<div class="image_particulars"></div>

.image,.image_particulars{float: left;}
.image{width: 300px;border: 1px solid silver;}
.image_particulars{width: 300px;height: 300px;border: 1px solid silver;position: relative;overflow: hidden;display: none;}

function getMousePos(event){
var e=event||window.event;
var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollY=document.documentElement.scrollTop||document.body.scrollTop;
var x=e.pageX||e.clientX+scrollX;
var y=e.pageY||e.clientY+scrollY;
return{'x':x,'y':y};
}
$(function(){
var n=3;
var img_par=$('.image_particulars');
var img_par_width=img_par.width();
var img_par_height=img_par.height();
var img_width,img_height;
$('.image img').on('mouseover mouseout',function(){
if(event.type==='mouseover'){
img_par.css('display','block');
var img=$('.image img').clone();
img.css('position','absolute');
img_par.append(img);
img_width=img.width();
img_height=img.height();
var par_img=$('.image_particulars img');
par_img.width(img_width*n);
par_img.height(img_height*n);
}else{
$('.image_particulars img').remove();
img_par.css('display','none');
}
});
$('.image img').on('mousemove',function(){
var img_pos=$(this).position();
var img_pos_width=img_pos.left;
var img_pos_height=img_pos.top;
var e=event||window.event;
var eX,eY;
eX=getMousePos(e).x;
eY=getMousePos(e).y;
var left=-(eX-img_pos_width)*n+img_par_width/2+'px';
var top=-(eY-img_pos_height)*n+img_par_height/2+'px';
var par_img=$('.image_particulars img');
par_img.css('left',left);
par_img.css('top',top);
});
})