图片放大镜问题

设置大图显示在小图右边但是最右边小图的大图因为显示器宽度的问题不能完全看到
怎样判断如果显示器不能完全显示就把放大镜调整到左边来显示
希望有代码直接贴出来

解决方案 »

  1.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />
    <style>
    body {font-size:12px;}
    img {display:block;}
    .img {
    position:absolute;
    }
    .a {
    left:5px; top:100px;
    }
    .b {
    right:5px; top:100px;
    }
    .c {
    right:85px; top:150px;
    }
    .d {
    right:220px; top:180px;
    }
    .bigger {
    position:absolute; left:51px; top:0;
    }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <div class="img a">
    <img src="http://avatar.profile.csdn.net/E/8/7/2_tjh666.jpg" width="50" />
    </div>
    <div class="img b">
    <img src="http://info-database.csdn.net/Upload/2012-03-26/dr_shanghai-220-90-0320.jpg" width="50" />
    </div>
    <div class="img c">
    <img src="http://info-database.csdn.net/Upload/2012-03-26/dr_shanghai-220-90-0320.jpg" width="50" />
    </div>
    <div class="img d">
    <img src="http://info-database.csdn.net/Upload/2012-03-26/dr_shanghai-220-90-0320.jpg" width="50" />
    </div>
    <script>
    var docWidth = $(document).width();
    $('.img').mouseover(function(){
    var img = document.createElement('img');
    img.src = $(this).find('img')[0].src;
    img.className = 'bigger';
    if( this.offsetLeft + img.width + 51 >= docWidth ){
    img.style.left = -(img.width+1) + 'px';
    }
    this.appendChild(img);
    }).mouseout(function(){
    $(this).find('img:eq(1)').remove();
    })
    </script>
    </body>
    </html>
    楼主看看