iDamaG™

最近买了个ipod touch4，苹果的Retina 分辨率960* 640 在3.5寸的屏幕上显示确实了得。恰好室友小松告知，有国外博客上看到个仿Retina的演示作品，

自己就试着做了下,demo

function changePicPos(posX,posY){
 posX = posX - offLeft - 126;
 posY = posY - offTop - 59;
 circle.style.backgroundPosition = (-posX * 1.64 ) +"px"+" "+ (-posY * 1.37) + "px";
};

上面代码是关键点，1.64和1.37这个放大的比例是这样得出的（以下单位都是像素）：

缩略图大小500*283

原图大小1000*568

放大镜（直径为180）中背景图片通过background-position的 像素定位

假设鼠标悬浮在图片右下角，则鼠标mousemove事件得到的鼠标坐标经过处理后（减去外框到浏览器窗口的距离）为X1 =500、Y1=283，

而实际background-position 的值应该为：

X2 = 原图宽 – 放大镜直径 = 1000 – 180 =820

Y2 = 原图高 – 放大镜直径 = 568 – 180 = 388

X2 / X1 = 820 / 500 =1.64

Y2 / Y1 = 388 / 283 =1.37

补充：

1、chrome 貌似不支持透明的cur，因此放大镜中间有个白点，原本用透明的cur，但是chrome显示一块黑色。

2、IE 9 beta 下测试很卡，在IE9打开老外的博客发现也是这样，应该是IE9的问题

3、窗口大小发生变化时，虽然写了window.onresize = document.onscroll ，修正鼠标位置，但会出现放大镜闪烁。

4、绑定事件的函数用的是JavaScript大师 Dean Edwards 写的