图片放大镜效果

Question

效果如下网址，http://www.fun1978.com/goods-551.html
当将鼠标放在图片上时，会出现一个放大效果的图像。我晓得他是用两张不同大小的图片，然后大图片通过设置它的background-position来控制他的现实范围的。但是令我比较郁闷的是我不清楚他的js控制语句写在哪里，或者怎样写的。比如说他怎样读取鼠标的位置，怎样保持小图片的div与大图片保持一致。 不晓得描述清楚没

Answer 1

我整理的，里面有详细注释
zoomimage

Answer 2

嗯，楼上的zoomimage效果做的很不错哈~但是我还是想知道在http://www.fun1978.com/goods-551.html 中他是怎样实现那个放大镜效果的，应该有个onmouseover呀，怎么我就搜不到呢?还是另有机关？

Answer 3

参考：http://blog.csdn.net/gkw521/archive/2009/10/26/4730489.aspx
http://topic.csdn.net/u/20090927/11/108ef678-cdeb-4427-843d-e35a0d193b55.html?seed=1320863342&r=60113741#r_60113741

Answer 4

这是onmouseover的
不过建议你用onclick的，那个更友好些。

Answer 5

它的页面上有var settings = {
  bigImage_always_visible: false,
  drag_mode: false
};
zoom = new luckyZoom('smallimg', 'simage', 'bigimg', 'bimage', settings);
zoom.initZoom(); 
这就是它对图片进行放大处理的地方。具体的处理细节看它的douco.js,它里面定义了luckyZoom类，及其相关的操作。

Answer 6

哇塞，douco.js也太复杂了点。道行不够呀