jquery版本实现放大镜效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src=" js/jquery.min1.11.3.js"></script>
    <title>实现放大镜效果</title>
    <style>
        *{padding: 0;margin:0;}
        #wrap{
            position: relative;
            margin: 100px;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;    
        }
        .smallBox{
            position: relative;
            width: 400px;
            height: 400px;
        }
        .floatBox{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 215px;
            height: 215px;
            border: 1px solid #ccc;
            background-color: rgb(255, 255, 224);
            opacity: .5;
            filter: alpha(opacity = 50);
            z-index: 6;
            cursor: move;
        }
        .bigBox{
            display: none;
            position: absolute;
            left: 450px;
            top: 0;
            overflow: hidden;
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            z-index: 1;
        }
        .bigBox img{
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="smallBox">
            <div class="floatBox"></div>
            ![](imgs/small-AppleB.png)
        </div>
        <div class="bigBox">
            ![](imgs/big-AppleB.png)
        </div>
    </div>
    <script src=" js/jquery.min1.11.3.js"></script>
    <script>
        $(function() {
            /*var wrap = $('#wrap'); //获取容器
            var smallBox = $('.smallBox');  //获取小图片容器
            var floatBox = $('.floatBox');  // 获取放大镜
            var bigBox = $('.bingBox');  // 获取大图片容器
            var bigBoxImg = $('.big img');*/
            
            // 鼠标移动到小图上时
            $('.smallBox').mouseover(function(){
                // 显示放大镜
                $('.floatBox').css("display" ,"block");
                // 显示大图
                $('.bigBox').css("display" ,"block");
            }).mouseout(function(){
                // 显示放大镜
                $('.floatBox').css("display" ,"none");
                // 显示大图
                $('.bigBox').css("display" ,"none");
            });


            $('.smallBox').mousemove(function(e){
                var e = e || window.event;
                //小盒子容器的偏移量
                var offsetT = parseInt($('.smallBox').offset().top);// 浏览器到容器的高(上)偏移量 
                var offsetL = parseInt($('.smallBox').offset().left);// 浏览器到容器的宽(左)偏移量 
                
                
                // 放大镜的宽
                var floatBoxW = $('.floatBox').width() / 2;// 获取放大镜的宽/2
                var floatBoxH = $('.floatBox').height() / 2;// 获取放大镜的高/2
                // 鼠标的位置
                var cursorX = e.pageX;  //鼠标的X坐标
                var cursorY = e.pageY;  //鼠标的Y坐标

                //  光标的X坐标 - 容器的X偏移量 - 小图片盒子的宽的一半 == 【把鼠标绑定在放大镜的正中心，小图片会跟随鼠标移动而移动】
                var curL = (cursorX - offsetL)/2;
                var curT = (cursorY - offsetT)/2;
                
                // 小图片会跟随鼠标移动而移动
                $('.floatBox').css({
                    left : curL + 'px' ,
                    top : curT + 'px' 
                });
                
                var bigImgOffsetX = parseInt(cursorX - ($('.smallBox').width() - $('.floatBox').width()));
                var bigImgOffsetY = parseInt(cursorY - ($('.smallBox').height() - $('.floatBox').height()));
                // 获取放大镜的偏移量
                var floatOffsetL = parseInt($('.floatBox').offset().left);
                var floatOffsetT = parseInt($('.floatBox').offset().top);
                //  判断边界
                if((curL) < 0){
                    curL = 0;
                }
                if((curT) < 0){
                    curT = 0;
                }
                // 放大镜的移动最大的top和left
                var maxT = offsetT - floatBoxH;
                var maxL = offsetL - floatBoxW;
                if(curL > maxL){
                    curl = maxL;
                }
                if(curL > maxL){
                    curl = maxL;
                }

                // 大图片随着鼠标与放大镜的移动而移动
                $('.bigBox img').css({
                    left : - 3*bigImgOffsetX,
                    top : - 3*bigImgOffsetY
                });
            })
        });
    </script>
</body>
</html>
jquery版本实现放大镜效果

效果图

辉辉

引用和评论

数组的末尾添加、替换、删除、任意位置插入、获取
