Question

我有一张小图片，如果点击它会放大，当我使用17“笔记本电脑屏幕时放大功能工作，但当我使用不同的时候，放大的图片不会完全显示尺寸屏幕。当在mac上使用时，它也是同样的问题。

我只是想知道是否有办法让它在所有不同大小的窗口看起来都一样。

你可以在这里看到这个网站，如果你点击小图片，然后点击左边的较大图片，你可以放大，link text

感谢您的帮助。

<div class="small_product" id="small_product1">
        <img id="small_product1-1" src="images" />
        <img id="small_product1-2" src="images" />
</div>

<div class="big_product" id="big_product1-1">
        <img id="thumbnail1-1" src="#" />
        <img id="full1-1" src="#" />
</div>



    $(function() {

       var fullWidth = 950; // Width in pixels of full-sized image
       var fullHeight = 1000; // Height in pixels of full-sized image
       var thumbnailWidth = 320;  // Width in pixels of thumbnail image
       var thumbnailHeight = 480;  // Height in pixels of thumbnail image

    // Toggle full and thumbnail pictures on click
       $('#big_product1-1').click(function() {
                    $('#thumbnail1-1').toggle();
                        $('#full1-1').toggle();                 
       });

    // Do some calculations
    $('#big_product1-1').mousemove(function(e) {


  var mouseX=0;var mouseY=0;var posX=0;var posY=0;

      //detect safari on Mac
      var browser=navigator.userAgent;
      if (browser.toLowerCase().indexOf('macintosh') > 0) {
          mouseX = (e.screenX-200) - $(this).attr('offsetLeft');
          mouseY = (e.screenY-200) - $(this).attr('offsetTop'); 
      }else  {                                          
          mouseX = (e.screenX-300) - $(this).attr('offsetLeft'); 
          mouseY = (e.screenY-300) - $(this).attr('offsetTop'); 
      }
      posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth);
      posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight);




        $('#full1-1').css({
                         'left': '-' + posX + 'px',
                         'top': '-' + posY + 'px'
                          });
  });
});

Answer 1

显示器的对角线尺寸确实毫无意义。从您的代码中可以看出，您已经对像素宽度和高度进行了硬编码。执行此操作时，它完全取决于最终用户在该特定监视器上使用的分辨率设置。如果您要硬编码像素宽度/高度，您将永远不会让图像在所有显示器上显示相同。相反，您必须想出一种方法来确定显示器的当前分辨率，并相应地调整图像大小作为当前显示器分辨率的相对量。

图片放大的问题

1 个答案: