放大镜案例

运用了两种思路。显示半透明遮罩层的思路都一致，在放大的图片框中移动采用了不同的方法。
1.第一种实现原理:
①鼠标移入over：遮罩层和大图显示；移出out：遮罩层和大图消失
②鼠标移动move：遮罩层跟随鼠标移动。（可以参考拖拽）
③大图部分：实现大图跟着遮罩层一起移动的效果，使用了scrollLeft（？滚动条偏移，还没有具体学过）
代码部分：

left.onmousemove = function(e){
        e = e||event;
       var x = e.clientX - wrapper.offsetLeft;
        var y = e.clientY - wrapper.offsetTop;
        
        // ..偏移矫正，原始的位置是鼠标在遮罩层的左顶点，要让鼠标移动到中间，
        //就让遮罩层上移一半offsetHeight，左移一半offsetWeight。（与鼠标移动的距离相反
        x = x-moveDiv.offsetLeft/2;
        y = y-moveDiv.offsetTop/2;
        
        // ...判断：不让遮罩层脱离框的范围
        if(x<=0){
            x=0;
        }
        //也可以写成 x = x<=0? 0：x;
        if(x>=wrapper.offsetWidth-moveDiv.offsetWidth){
            x=wrapper.offsetWidth-moveDiv.offsetWidth;
        } 
        if(y<=0){
            y=0;
        }
       //也可以写成 y = y<=0? 0：y;
          
        if(y>=wrapper.offsetHeight-moveDiv.offsetHeight){
            y=wrapper.offsetHeight-moveDiv.offsetHeight;
        } 

        moveDiv.style.left = x+'px';
        moveDiv.style.top = y+'px';
        
        right.scrollLeft = x*3;
        right.scrollTop = y*3;
        //这样写是会产生误差的，没有经过计算的倍数和小图大图宽度。
        //原理是，当遮罩层下移的时候，大图区域是大图不动，可视框跟着移动，方向一致。
     }

2.使用了jq（可以使用js看看）
第二种的大图和遮罩层尺寸经过计算赋值。
假装每个可以让用户看到的框都是一个可视区。
小图和大图之间的放大倍数可设置，因为要通过遮罩层看到完整的大图，相当于遮罩层和小图的比例=大图显示区和大图的比例。
在此案例中，我们设置放大倍数为2，同时都设置为正方形减少难度。
遮罩层宽度/小图 =大图可视区/大图
因为我们在此案例中设置了两边都一样的宽度，即小图=大图可视区，
列式子：遮罩层宽度/a = a/(a*2)
所以，遮罩层宽度 = 1/2 *(a)，即小图的小半宽度。

（可以额外考虑长方形的情况，或者小图和大图可视区不一样大的情况）。

代码部分：

        $(function(){
            // 设置放大倍数
            var mul = 2;
            // 设置大图宽度
            $('.bigView').find('img').css({
                'width':500*mul+'px',
                'height':500*mul+'px'
            });
            // 设置遮罩层宽度,根据公式可得，遮罩层宽度为1/2 *小图宽度
            $('.moveView').css({
                'width':500/2 +'px',
                'height':500/2+'px'
            });
            // 鼠标移入的时候遮罩层和大图都出现
            $('.content').mouseover(function(){
                // 
                $('.moveView').show();
                $('.bigView').show();

            });
            //鼠标移动的时候，遮罩层和大图都开始动。遮罩层的移动参考拖拽，大图移动使用了margin，大图区域中的img在js中动态设置了宽高，其他属性都没有设置，margin较简单。（考虑一下绝对定位可以吗）
            $('.content').mousemove(function(e){
                var e = e||event;
                var disx = e.clientX -$('.content').offset().left;
                var disy = e.clientY - $('.content').offset().top;
                
                var x = disx -($('.moveView').width())/2;
                var y = disy -($('.moveView').height())/2;
                
                var maxX = $('.content').width() -$('.moveView').width();
                var maxY = $('.content').height() -$('.moveView').height();

                x = x<=0?0:x;
                y = y<=0?0:y;
                x = x>=maxX?maxX:x;
                y = y>=maxY?maxY:y;

                $('.moveView').css({
                    'left': x+'px',
                    'top':y+'px'
                });

                // 大图:可视区不动，大图片动，加负号是方向不同
                $('.bigView').find('img').css({
                    'margin-left':- x*mul+'px',
                    'margin-top':- y*mul +'px'
                });
            });

            // 鼠标移出的时候，一起消失
            $('.content').mouseout(function(){
                // 
                $('.moveView').hide();
                $('.bigView').hide();
            }); 
        });
        
    </script>

猜你喜欢