解决方案 »

  1.   

    div#ab
         div.mainshow
               img+ div.zoombox
         div.list
         div.bigzoom
    通过绑定mainshow的mouseover \ mouseout的方法来做就可以了
      

  2.   


    还是不行,鼠标一进去,生成zoombox就产生mouseout事件了能稍微详细点不?
    _mainshow.mouseover(function(event) {
    $("#debug2").text("over");
    _zoomBox = _mainobj.find("div.ZoomBox");
    _zoomBox = (_zoomBox.length > 0) ? _zoomBox : _mainshow.append('<div class="ZoomBox">&nbsp;</div>').children('div.ZoomBox');
    _zoomBox.css({
    "top": event.clientY  + "px",
    "left": event.clientX + "px"
    });
    _mainobj.mousemove(function(event) {
    _zoomBox.css({
    "top": event.clientY - 10 + "px",
    "left": event.clientX - 10 + "px"
    });
    $("#debug").text("x:" + _zoomBox.css("top") + "y:" + _zoomBox.css("left"));
    });
    }); _mainshow.mouseout(function(event) {
    /* Act on the event */
    $("#debug2").text("out");
    _zoomBox.remove();
    _mainobj.unbind("mousemove"); });
      

  3.   

    无论我采用的是zoombox remove 还是hidden
    如果在mainshow中有zoombox慢慢移动由于zoombox一直在鼠标下面,移开到mainshow边界,不会产生mouseout事件
    除非非常快速移动,mousemove跟不上鼠标速度,鼠标在zoombox外,经过mainshow边框才产生mouseout事件
      

  4.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
    *{margin:0;padding:0;}
    .mainshow{position:relative;width:200px;height:200px;border:1px solid #ccc;overflow:hidden;}
    .mainshow img{display:block;width:200px;height:200px;}
    .ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;}
    </style>
    </head>
    <body>
    <div id="ab">
         <div class="mainshow">
          <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
          <div class="ZoomBox"></div>
         </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" >
    var _mainshow = $(".mainshow");
    _mainshow.mouseover(function(event) {
        _zoomBox = $(this).find("div.ZoomBox");
        _zoomBox.css({
            "top": event.clientY  + "px",
            "left": event.clientX + "px",
            "display":"block"
        });
        _mainshow.mousemove(function(event) {
            _zoomBox.css({
                "top": event.clientY - 10 + "px",
                "left": event.clientX - 10 + "px"
            });
        });
        _mainshow.mouseout(function(event) {
        _mainshow.unbind("mousemove");
        _zoomBox.css({
            "display":"none"
        });
    });
    });
    </script>
    </body>
    </html>
    精简了一下,只显示放大镜,其他显示图片你可以自己补充一下
      

  5.   


    你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。
    不知何故?
    貌似是因为position:relative;的缘故,去除
    则是我前面提出的特殊情况,mouseout事件不触发。
      

  6.   


    你的这个例子可行,但是我加入一句#ab{margin:auto;width: 400px;},立马就不行了。
    不知何故?
    貌似是因为position:relative;的缘故,去除
    则是我前面提出的特殊情况,mouseout事件不触发。不是不行,你要明白event.clientX是什么位置,你要  -  (#ab距离左边的距离)
      

  7.   

    大致猜到点前面我代码的问题,是因为使用了绝对定位,未对父div.mainshow设置相对定位。
    但是有个疑问
    我未对div.mainshow设置相对定位,则zoombox跟随body级别,但是为何mainshow的mouseout不触发呢?
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
    *{margin:0;padding:0;}
    #ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}
    .mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;}
    .mainshow img{display:block;width:200px;height:200px;}
    .ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}
    </style>
    </head>
    <body><div id="ab">
         <div class="mainshow">
          <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
          <div class="ZoomBox"></div>
         </div>
    </div>
    <div style="clear:both"></div>
    <div id="debug">debug</div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" >
    var _mainshow = $(".mainshow");
    var startX = $(".mainshow").offset().left;
    _mainshow.mouseover(function(event) {
        _zoomBox = $(this).find("div.ZoomBox");
        _zoomBox.css({
            "top": event.clientY - 10 + "px",
            "left": event.clientX - 10  + "px",
            "display":"block"
        });
        _mainshow.mousemove(function(event) {
            _zoomBox.css({
                "top": event.clientY - 10 + "px",
                "left": event.clientX - 10   + "px"
            });
            $("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top);
        });
        _mainshow.mouseout(function(event) {
        _mainshow.unbind("mousemove");
        _zoomBox.css({
            "display":"none"
        });
    });
    });
    </script>
    </body>
    </html>
      

  8.   


    ZoomBox  也是属于mainshow的,只要鼠标还在zoombox上,就没执行mouseout ,所以不能让zoombox跑出mainshow <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>test</title>
    <style>
    *{margin:0;padding:0;}
    #ab{margin:auto;width: 400px;border:1px solid blue;text-align: center;}
    .mainshow{width:200px;height:200px;border:1px solid #ccc;overflow:hidden;margin:auto;overflow:hidden;position:relative;}
    .mainshow img{display:block;width:200px;height:200px;}
    .ZoomBox{display:none;width:50px;height:50px;position:absolute;background:#fff;opacity:0.6;top:0;left:0;z-index:2;border:1px solid red;}
    </style>
    </head>
    <body>
     
    <div id="ab">
         <div class="mainshow">
             <img src="http://images.csdn.net/20140606/538702d5489bf.png" alt="">
             <div class="ZoomBox"></div>
         </div>
    </div>
    <div style="clear:both"></div>
    <div id="debug">debug</div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" >
    var _mainshow = $(".mainshow");
    var startX = $(".mainshow").offset().left;
    _mainshow.mouseover(function(event) {
        _zoomBox = $(this).find("div.ZoomBox");
        _zoomBox.css({
            "top": event.clientY - 10 + "px",
            "left": event.clientX - 10 - startX  + "px",
            "display":"block"
        });
        _mainshow.mousemove(function(event) {
            _zoomBox.css({
                "top": event.clientY - 10 + "px",
                "left": event.clientX - 10 - startX   + "px"
            });
            //$("#debug").text("Y:"+event.clientY+"X:" + event.clientX + "ab-x:" + $("#ab").offset().left + "ab-y:" + $("#ab").offset().top);
        });
        _mainshow.mouseout(function(event) {
            _mainshow.unbind("mousemove");
            _zoomBox.css({
                "display":"none"
            });
        });
    });
    </script>
    </body>
    </html>
      

  9.   

    也就是说,只要对mainshow加上overflow:hidden就解决问题了?我试一试,谢谢。