标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片局部放大</title> 6 <style type="text/css"> 7 #img1 8 { 9 width:320px; 10 height:200px; 11 } 12 #div1 13 { 14 position:absolute; 15 top:220px; 16 left:100px; 17 width:320px; 18 height:200px; 19 background-color:#FCC; 20 background-repeat:no-repeat; 21 background-image:url(images/小黄人1.jpg); 22 } 23 </style> 24 <script type="text/javascript" language="javascript"> 25 var $=function(id){return document.getElementById(id);}; 26 function biggen(e,obj) 27 { 28 // topy 和 topx 表示obj对象左上角的坐标 29 var topy=obj.getBoundingClientRect().top; 30 var topx=obj.getBoundingClientRect().left; 31 // x 和 y 表示鼠标以obj对象左上角为坐标原点的坐标 32 var x=e.clientX-topx; 33 var y=e.clientY-topy; 34 // 4 表示图片的x 和 y 分别缩小的倍数 35 var truex=x-x*4; 36 var truey=y-y*4; 37 // -768 和 -400 表示向上最多移动400 向左最多移动768 38 // 原图大小为 1280 和 800 ，div大小为320 200 39 if(truex<-768) 40 { 41 truex=-768; 42 } 43 if(truey<-400) 44 { 45 truey=-400; 46 } 47 $("div1").style.backgroundPosition=truex+"px "+truey+"px"; 48 } 49 </script> 50 </head> 51 52 <body> 53 <img id="img1" src="images/小黄人1.jpg" onmousemove="biggen(event,this)"/> 54 <!-- <input type="text" id="text1"/>--> 55 <div id="div1"> 56 </div> 57 </body> 58 </html>
标签：
原文地址：http://www.cnblogs.com/Yang-king/p/4624885.html
