放大圖看細節

標籤：style   blog   http   color   io   os   ar   sp   div   

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 })

放大圖看細節