图片放大镜效果—基于jquery

<script src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".smallBox").mouseenter(function(){
                //获取小图的位置
                var sLeft = $(".smallBox").offset().left;
                var sTop = $(".smallBox").offset().top;
                //鼠标移入显示大图，并设置大图位置
                $(".bigBox").show().offset({
                    left: sLeft + 400 + 10 ,
                    top: sTop 
                });
                //鼠标移入显示放大镜元素
                $(".zoom").show();
                //鼠标移动
                $(".smallBox").mousemove(function(event){

                    //获取鼠标位置
                    var mLeft = event.pageX - sLeft;
                    var mTop = event.pageY - sTop;
                    //设置放大镜元素在鼠标中心，并不超过边界
                    var zLeft = Math.min(Math.max(mLeft - 100,0),200);
                    var zTop = Math.min(Math.max(mTop - 100,0),200);
                    $(".zoom").css("left",zLeft + "px").css("top",zTop + "px");
                    //设置大图滚动位置与放大镜元素位置相同
                    $(".bigBox").scrollLeft(zLeft * 2).scrollTop(zTop * 2);
                    
                });
                //鼠标移出大图与放大镜元素隐藏
            }).mouseleave(function(){
                $(".zoom").hide();
                $(".bigBox").hide();
            })
        })
</script>

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .smallBox{
            width: 400px;
            height: 400px;
            position: relative;
        }
        .smallBox .zoom{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            opacity: 0.3;
            position: absolute;
            cursor: move;
            display: none;
        }
        .smallBox img{
            display: block;
            width: 100%;
            height: 100%;
        }
        .bigBox{
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: absolute;
            display: none;
        }
        .bigBox img{
            display: block;
            width: 800px;
            height: 800px;
        }
</style>

<div>
   <div class="smallBox">
       <div class="zoom"></div>
       <img src="../images/service_pic1.jpg"/>
   </div>
   <div class="bigBox">
       <img src="../images/service_pic1.jpg"/>
   </div>
</div>