jQuery实现图片放大镜效果

实现放大镜效果使用到的功能包括：相对定义、绝对定位、鼠标事件、显示隐藏等，大概思路是有两个盒子，当鼠标离开小盒子里的图片的时候，大的盒子隐藏。废话不多说，直接上代码，记得引入jQuery插件！引入jQuery插件！引入jQuery插件！

布局：

       

           

           

       

       

           

       

   

样式：

*{

    margin: 0;

    padding: 0;

}

#box{

    width: 1000px;

    height: 500px;

    border: 1px solid;

}

#box>#small{

    width: 320px;

    height: 240px;

    overflow: hidden;

    position: relative;

}

#box>#small>img{

    width: 100%;

    height: 100%;

}

#yi{

    width: 100px;

    height: 100px;

    background: rgba(8, 8, 8, 0.5);

    position: absolute;

    left: 0;

    top: 0;

    display: none;

}

#box>#big{

    width: 400px;

    height: 300px;

    overflow: hidden;

    position: absolute;

    top: 0%;

    left: 320px;

    display: none;

}

#box>#big>img{

    width: 1200px;

    height: 960px;

}

逻辑代码：

$('#small').mousemove(function (e) {

    // 获取x坐标

    var x = e.pageX;

    // 获取y坐标

    var y = e.pageY;

    // 鼠标移动时，显示放大镜，并且跟随鼠标移动。

    $("#yi").css({

        display: "block",

        left: x - 50 + "px",

        top: y - 50 + "px"

    });

    // 显示bigdiv

    $('#big').css({

        display: 'block'

    })

    // 鼠标移动时，改变大图位置

    $("#big img").css({

        marginLeft: -x * 4 + 200 + "px",

        marginTop: -y * 4 + 200 + "px"

    })

        //放鼠标离开时，让放大镜和大图隐藏

        $('#small').mouseout(function () {

            $("#yi").css({

                display: "none"

            });

            $("#big").css({

                display: "none"

            })

        })

})