jQuery练习4京东商品详情页面（放大镜效果）

视频

//11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域

function bigImg () {
    var $mediumImg = $('#mediumImg')
    var $mask = $('#mask')//小黄块
    var $maskTop = $('#maskTop')//覆盖在图片外的和图片大小一样的一层
    var $largeImgContainer = $('#largeImgContainer')
    var $loading = $('#loading')
    var $largeImg = $('#largeImg')
    //黄块长宽
    var maskWidth = $mask.width()
    var maskHeight = $mask.height()
    //图片长宽
    var maskTopWidth = $maskTop.width()
    var maskTopHeight = $maskTop.height()

    $maskTop.hover(function(event){//进入
        //显示小黄块
        $mask.show()
        //动态加载对应的大图
        //images\products\product-s1-m.jpg
        //images\products\product-s1-l.jpg

        var src = $mediumImg.attr('src').replace('-m.', '-l.')
        //给大图添加src
        $largeImg.attr('src', src)
        //显示放大镜框架
        $largeImgContainer.show()
        //绑定加载完成的监听
        $largeImg.on('load',function(){//大图加载完成
            //得到大图的尺寸
            var largeWidth = $largeImg.width
            var largeHeight = $largeImg.height
            //给$largeImgContainer大图容器设置尺寸
            $largeImgContainer.css({
                width : largeWidth/2
                height : largeHeight/2
            })
            //显示大图
            $largeImg.show()
            //隐藏加载进度条
            $loading.hide()
            //绑定mouseMove监听,鼠标移动的监听
            $maskTop.mousemove(function(event){//在移动过程中反复调用
                /*
                1.移动小黄块
                2.移动大图
                */
                //1.移动小黄块
                //计算出小黄块的left/top
                var left = 0
                var top = 0
                //事件的坐标
                var eventLeft = event.offsetX
                var eventTop = event.offsetY
                left = eventLeft - maskWidth/2
                top = eventTop - maskHeight/2
                
                //left在[0,maskTopWidth - maskWidth]
                if(left < 0) {
                    left = 0
                }else if(left > maskTopWidth - maskWidth) {
                    left = maskTopWidth - maskWidth
                }

                //top在[0,maskTopHeight - maskHeight]
                if(top < 0) {
                    top = 0
                }else if(top > maskTopHeight - maskHeight) {
                    top = maskTopHeight - maskHeight
                }
                //给$mask小黄块重新定位
                $mask.css({
                    left : left,
                    top : top
                })
                //2.移动大图
                //得到大图的坐标
                left = -left*largeWidth/maskTopWidth
                top = -top*largeHeight/maskTopHeight
                //设置大图的坐标
                $largeImg.css({
                    left : left,
                    top : top
                })
            })
        })
        
            
    },function(){
        //隐藏小黄块
        $mask.hide()
        //隐藏大图容器
        $largeImgContainer.hide()
        //隐藏大图
        $largeImg.hide()
    })

}