1 <div class="image"><img src="car.jpg"></div> 2 <div class="image_particulars"></div>
1 .image,.image_particulars{float: left;} 2 .image{width: 300px;border: 1px solid silver;} 3 .image_particulars{width: 300px;height: 300px;border: 1px solid silver;position: relative;overflow: hidden;display: none;}
1 function getMousePos(event){ 2 var e=event||window.event; 3 var scrollX=document.documentElement.scrollLeft||document.body.scrollLeft; 4 var scrollY=document.documentElement.scrollTop||document.body.scrollTop; 5 var x=e.pageX||e.clientX+scrollX; 6 var y=e.pageY||e.clientY+scrollY; 7 return{'x':x,'y':y}; 8 } 9 $(function(){ 10 var n=3; 11 var img_par=$('.image_particulars'); 12 var img_par_width=img_par.width(); 13 var img_par_height=img_par.height(); 14 var img_width,img_height; 15 $('.image img').on('mouseover mouseout',function(){ 16 if(event.type==='mouseover'){ 17 img_par.css('display','block'); 18 var img=$('.image img').clone(); 19 img.css('position','absolute'); 20 img_par.append(img); 21 img_width=img.width(); 22 img_height=img.height(); 23 var par_img=$('.image_particulars img'); 24 par_img.width(img_width*n); 25 par_img.height(img_height*n); 26 }else{ 27 $('.image_particulars img').remove(); 28 img_par.css('display','none'); 29 } 30 }); 31 $('.image img').on('mousemove',function(){ 32 var img_pos=$(this).position(); 33 var img_pos_width=img_pos.left; 34 var img_pos_height=img_pos.top; 35 var e=event||window.event; 36 var eX,eY; 37 eX=getMousePos(e).x; 38 eY=getMousePos(e).y; 39 var left=-(eX-img_pos_width)*n+img_par_width/2+'px'; 40 var top=-(eY-img_pos_height)*n+img_par_height/2+'px'; 41 var par_img=$('.image_particulars img'); 42 par_img.css('left',left); 43 par_img.css('top',top); 44 }); 45 })
