京东放大镜效果

Posted 2021-01-01 caicaihong

开始以为是很难的事情，结果可以用别的思维去解决的，就显得很简单辣其实，比如说，图片放大，是本来的图片的大小，然后进行一个移动产生，所以UI很重要，这样子，js写起来才轻松多一点

主要的js代码如下：

function bigImg () {
        
        var $mask = $("#mask");
        var $maskTop = $("#maskTop");
        var $loading = $("#loading");
        var $largeImg = $("#largeImg");
        var $mediumImg = $("#mediumImg");
        //小黄块的宽高
        var maskWidth = $mask.width();
        var maskHeight = $mask.height();
        //移动区域
        var maskTopWidth = $maskTop.width();
        var maskTopHeight = $maskTop.height();
        
        var $largeImgContainer = $("#largeImgContainer");
        
        
        
        
        $maskTop.hover(function(){
            
            
            $mask.show();
            
            var src = $mediumImg.attr(‘src‘).replace(‘-m.‘, ‘-l.‘)
              $largeImg.attr(‘src‘, src)
            $largeImgContainer.show();
            //显示小黄块之后，等待加载大图出来再进行小黄块的移动
            $largeImg.on(‘load‘,function () {
                
                //得到大图的尺寸
                var largeImgWidth = $largeImg.width();
                var largeImgHeight = $largeImg.height();
                
                //大图容器的尺寸是大图的二分之一
                $largeImgContainer.css({
                    width:largeImgWidth/2,
                    height:largeImgHeight/2
                })
                
                $largeImg.show();
                $loading.hide();
                
                
                $maskTop.mousemove(function(event){
                event = event || window.event
                var eventLeft = event.offsetX;
                var eventTop = event.offsetY;
                
                //定位把小黄块中心点到当前鼠标的位置，从而实现移动
                var left = eventLeft - maskWidth/2;
                var top = eventTop - maskHeight/2;
                
                if(left<0 ){
                    left = 0;
                }else if(left > maskTopWidth-maskWidth){
                    left = maskTopWidth-maskWidth;
                }
                
                if(top<0){
                    top = 0;
                }else if (top>maskTopHeight-maskHeight) {
                    top = maskTopHeight - maskHeight;
                }
                
                //设置小黄块的位置
                $mask.css({
                    left:left,
                    top:top
                })
                
                left = -left *  largeImgWidth / maskTopWidth;
                top = -top * largeImgHeight / maskTopHeight;
                $largeImg.css({
                    left:left,
                    top:top
                })
            })
            })
            
            
        },function(){
            $mask.hide();
            $largeImg.hide();
            $largeImgContainer.hide();
        })
        
        
        
        
    }