jquery放大镜问题，希望能够适用于矩形，而不仅仅是正方形。求大牛帮忙~~

本帖最后由 u012193634 于 2014-08-09 21:35:22 编辑

解决方案 »

  1.   

    这本来就是个比例问题吧，你#show的大图要和#move小图缩放等比例就可以了。
    还是说你的细节图要矩形？
      

  2.   

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            .view{
                width: 400px;
                height: 400px;
                position: relative;
                margin-left: 1px;
                float: left;
            }
            #move {
                position: absolute;
                top: 0px;
                left: 0px;
                z-index: 10;
                border: 1px solid #ccc;
                overflow:hidden;
            }        /*移动块的大小*/
            #moveblock {
                position: absolute;
                display: none;            background-color: yellow;
                filter:alpha(opacity=40);       /* IE */
                opacity:-moz-opacity:0.4;              /* 老版Mozilla */
                opacity:-khtml-opacity:0.4;              /* 老版Safari */
                opacity: 0.4;
                z-index: 10;
                cursor: move;
            }
            #show {            position: absolute;
                top: 0px;
                left: 410px;
                border: 1px solid #ccc;
                z-index: 20;
                overflow: hidden;
                display: none;
            }
            #show img {
                position: absolute;
                top:0;
                left: 0;
            }    </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
            _sourceOffset=resize("#show","#move");
                 $("#moveblock").height(_sourceOffset.height/4).width(_sourceOffset.width/4);
                $("#show").height(_sourceOffset.height).width(_sourceOffset.width)
                move();        });
    function resize(sourceDiv,thumbDiv){
        $sourceImg=$(sourceDiv+" img");
        $thumbDiv=$(thumbDiv+" img");
        //获取实际长宽
        var sImg = new Image();
        sImg.src =$sourceImg.attr("src") ;
        var  sw = sImg.width;
        var sh = sImg.height;
        $sourceImg.height(sh);
        $sourceImg.width(sw);
        $thumbDiv.height(sh/2);
        $thumbDiv.width(sw/2);
    return {"height":sh,"width":sw};
    }
            // 放大镜
            function move() {
                $('.view #move').hover(                    function()
                        {
                            $('.view #moveblock').show();
                            $('.view #show').show();
                        }
                        ,function()
                        {
                            $('.view #show').hide();
                            $('.view #moveblock').hide();
                        }
                );
                $('.view #move').mousemove(function(event){
                    // 图片距离页面的距离
                    var box_left=$(this).offset();
                    var page_x=event.pageX;//鼠标指针的X坐标                // alert(box_left.top);
                    var m_left=event.pageX-box_left.left;
                    var m_top=event.pageY-box_left.top;                //计算色块区域位置
                    var  harlf_x =$("#moveblock").width()/2;
                    var  harlf_y =$("#moveblock").height()/2;
                    var a_left=m_left-harlf_x;
                    var a_top=m_top-harlf_y;
                    var  max_l = $("#move").width()-$("#moveblock").width();
                    var  max_t = $("#move").height()-$("#moveblock").height();                //左侧距离小于0
                    if(a_left<0)
                        a_left=0;
                    //左侧距离大于225-边框占的宽度
                    if(a_left>max_l)
                        a_left=max_l;                //顶部距离小于0
                    if(a_top<0)
                        a_top=0;
                    //顶部距离大于225-边框占的宽度                if(a_top>max_t)
                        a_top=max_t;                //赋值色块区域位置
                    $('.view #moveblock').css({'left':a_left+'px','top':a_top+'px'});
                    //右边区域                //计算图片位置                // 计算倍数
                    var num_big = $("#show img").width() ;
                    var num_small = $("#move img").width();                var num = num_big/num_small;                // alert(num);
                    var r_left=a_left*-num;
                    var r_top=a_top*-num;                // var test = 173*-2;
                    // alert(test);                //赋值图片位置
                    $('.view #show img').css({'left':r_left+'px','top':r_top+'px'});
                    /*//为了精准，可以重新赋值移动色块的大小
                    $('#moveblock').css({
                        width: num_small/num,
                        height: num_small/num
                    });*/            });
            }    </script>
    </head><body>
    <div class="view">
        <div id="move"class="ShowPictureBox">
            <img src="http://gd1.alicdn.com/imgextra/i1/356417368/TB2q_1yaXXXXXaSXXXXXXXXXXXX-356417368.jpg" >
            <div id="moveblock"></div>
        </div>
        <div id="show" class="ShowBigPictureBox" >
            <img src="http://gd1.alicdn.com/imgextra/i1/356417368/TB2q_1yaXXXXXaSXXXXXXXXXXXX-356417368.jpg" >
        </div>
    </div></body>
    </html>
      

  3.   

    另外还有就是new Image() 的方式获取长宽并不保险，如果网速很慢的客户访问，获得的图片宽高是0
    如果要非常健壮的话要用非异步的ajax请求来获取
      

  4.   


    我如果传一个 宽度和高度不相等的图片，运行此段代码，无论是#show 还是#move 都会变形。
      

  5.   

    谢谢一楼的帮助，我是想要show和move作为一个容器，不因为图片的大小而改变容器的大小。我再根据您给的代码 ，好好研究研究，谢谢。
      

  6.   

    各种宽高当然不能写死，要动态改变。然后算各种比例吧，不算很麻烦。容器move的大小固定的话，考虑下里面显示的img长或宽和容器的变长一样，另一边等比缩小就ok了
      

  7.   

    你这个问题的关键是图片image 的load , 浏览器加载image是异步的，你必须在image的loaded事件中callback 你的放大计算。