使用 Jquery 的电影组合图像

Question

我正在开发我的投资组合网站。我的网站设计尺寸非常大，为 1600x900 分钟，因为我将它们设计在宽屏上以获得更好的视图。

我正在使用 Jquery 将图片放大。现在，当它变大时，它会覆盖整个屏幕并覆盖我的网站。

我想要一些东西，当图片在盒子里变大时，我可以用鼠标移动它，这样它就不会覆盖整个屏幕。

这是下面的代码。

<div class="two-one last">
    <h2>Recent Work</h2>

    <ul class="recent">
        <li class="image"><img src="./example/recent1.jpg" alt="Image"><a href="./example/recent1_b.jpg" class="link" rel="pretty" title="Vision Plus Logo">View</a></li>
        <li class="image last"><img src="./example/recent2.jpg" alt="Image"><a href="./example/recent2_b.jpg" class="link" rel="pretty" title="Rahman & Rahman Dental Surgeons">View</a></li>
        <li class="image"><img src="./example/recent3.jpg" alt="Image"><a href="./example/recent3_b.jpg" class="link" rel="pretty">View</a></li>
        <li class="image last"><img src="./example/recent4.jpg" alt="Image"><a href="./example/recent4_b.jpg" class="link" rel="pretty">View</a></li>
    </ul>
</div>

查看此图片 http://i40.tinypic.com/29lfbs1.jpg

当您第一次单击图像时，您会看到预览。然后，如果您单击图像上角的按钮。它将获得全尺寸，我只是希望它显示在当前框中，但图像将满而不是框。因此，我可以将图像拖动到框中的任何我想要的位置，以查看完整图像而不会丢失任何质量。

Answer 1

jQuery-ui 有一些非常好的实现。您可以免费下载/使用 jQuery-ui

检查：http://jqueryui.com/demos/draggable/

使用 html 源代码，例如：

<div class="two-one last">
  <h2>Recent Work</h2>

  <ul class="recent">
    <li class="image">
      <img src="./example/recent1.jpg" alt="Image">
      <a href="./example/recent1_b.jpg" class="link">View</a>
    </li>

    <!-- more li here -->

   </ul>
 </div>

然后，您可以默认使用 CSS 隐藏图像，并通过一个简单的点击事件来显示图像。

var link = $('.link');

link.click(function()
{
  var big_image_url = $(this).attr('href');

  var big_img = $('<img id="draggable">').attr('src', big_image_url);

  big_img.load(function()
  {
     $("body").prepend(big_img);
     $('#draggable').draggable();
   });

   return false; // To prevent a href from working
 });

一个完整的网页（非常简单）实现如下所示：

http://pastebin.com/FtjaiGpa