放大镜 - 移动镜片

秋子淡无痕

缩略图和镜片组成的 DOM 结构如下.

1. <a id="thumb" href="#">
   
2.         <img src="http://img.alibaba.com/photo/291909368/Free-Shipping-Popular-ladies-shoes-Tote-shoes-paypal-accept-201001.jpg" alt="Thumbnail" />
   
3.         <span id="glass"></span>
   
4. </a>

复制代码

1. /**
   
2. * 获取镜片在放大目标元素上的位置
   
3. * @param ev                触发的事件
   
4. * @param thumb                缩略图对象
   
5. * @param glass                镜片对象
   
6. * @return                        x:镜片在放大目标元素上的横向位置, y:镜片在放大目标元素上的纵向位置
   
7. */
   
8. function getGlassOffset(ev, thumb, glass) {
   
9.         var offset = {
   
10.                 left:0,
    
11.                 top:0
    
12.         };
    
13. 
    
14.         // 偏移量
    
15.         var thumbOffset = getCumulativeOffset(thumb);
    
16.         // 鼠标在页面上的位置
    
17.         var mousePoint = getMousePoint(ev);
    
18.         // 镜片实际尺寸
    
19.         var glassSize = getSize(glass);
    
20.         // 简缩图实际尺寸
    
21.         var thumbSize = getSize(thumb);
    
22. 
    
23.         // 光标横向位置
    
24.         var cursorX = mousePoint.x - thumbOffset.left;
    
25.         // 镜片横向偏移量
    
26.         offset.left = cursorX - glassSize.width / 2;
    
27.         if(offset.left < 0) {
    
28.                 offset.left = 0;
    
29.         } else if(offset.left > thumbSize.width - glassSize.width) {
    
30.                 offset.left = thumbSize.width - glassSize.width;
    
31.         }
    
32. 
    
33.         // 光标纵向位置
    
34.         var cursorY = mousePoint.y - thumbOffset.top;
    
35.         // 镜片纵向偏移量
    
36.         offset.top = cursorY - glassSize.height / 2;
    
37.         if(offset.top < 0) {
    
38.                 offset.top = 0;
    
39.         } else if(offset.top > thumbSize.height - glassSize.height) {
    
40.                 offset.top = thumbSize.height - glassSize.height;
    
41.         }
    
42. 
    
43.         return offset;
    
44. }

复制代码

原文：http://www.neoease.com/javascript-magnifier-move-glass/