如何将图像使用jQuery

我只是想知道它是如何可能使用jQuery一峰放大，如何将图像使用jQuery

像这样的网站放大，

link text

当你点击大图像，它会放大你可以移动光标，看到了PIC的其他部分，而放大，

我会很感激，如果有人可以告诉我一个链接或把我在正确的方向。

感谢

来源

2009-10-17 amir

他们不放大，什么是真正发生的事情是，当你点击缩放文本，在div内的图像是由图像的放大版本替换。溢出被设置为隐藏。

当您移动光标，使用一些巧妙的JavaScript和DOM处理，图像干脆搬到相对因此，创建你的图片缩放实际效果。

我会尽力为你创建了一个简单的例子。

编辑

对不起了一段时间，但在这里它是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Example</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
       var fullWidth = 864; // Width in pixels of full-sized image 
       var fullHeight = 648; // Height in pixels of full-sized image 
       var thumbnailWidth = 389; // Width in pixels of thumbnail image 
       var thumbnailHeight = 292; // Height in pixels of thumbnail image 

       // Set size of div 
       $('#picture').css({ 
         'width': thumbnailWidth+'px', 
         'height': thumbnailHeight+'px' 
       }); 

       // Hide the full-sized picture 
       $('#full').hide(); 

       // Toggle pictures on click 
       $('#picture').click(function() { 
         $('#thumbnail').toggle(); 
         $('#full').toggle(); 
       }); 

       // Do some calculations 
       $('#picture').mousemove(function(e) { 
         var mouseX = e.pageX - $(this).attr('offsetLeft'); 
         var mouseY = e.pageY - $(this).attr('offsetTop'); 

         var posX = (Math.round((mouseX/thumbnailWidth)*100)/100) * (fullWidth-thumbnailWidth); 
         var posY = (Math.round((mouseY/thumbnailHeight)*100)/100) * (fullHeight-thumbnailHeight); 

         $('#full').css({ 
           'left': '-' + posX + 'px', 
           'top': '-' + posY + 'px' 
         }); 
       }); 
     }); 
    </script> 

    <style type="text/css"> 
     #picture { 
       overflow: hidden; 
       position: relative; 
       border: 1px solid #000000; 
     } 

     #thumbnail { 
       cursor: pointer; 
     } 

     #full { 
       position: relative; 
       cursor: crosshair; 
     } 
    </style> 
</head> 

<body> 
    <div id="picture"> 
     <img alt="" id="thumbnail" src="http://img202.imageshack.us/img202/8403/93629325.jpg" /> 
     <img alt="" id="full" src="http://img111.imageshack.us/img111/4734/tbmecsekyellowflower.jpg" /> 
    </div> 
</body> 
</html>

您将需要相应地调整缩略图和全尺寸图像的宽度和高度。但只需复制粘贴上面的内容即可查看映像托管上托管的映像的示例。

来源

2009-10-17 09:18:18

工作，给我几分钟。 – 2009-10-17 09:35:18

+1工作不错！：P – Mottie 2009-10-17 13:45:04

+1个很好的例子，非常有用 – 2010-09-03 12:59:41