使用Jquery的电影公文包图像

我正在开发我的投资组合网站。我的网站设计是非常大的大小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>

近期工作

看到这张图了吗

---

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

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

检查：

使用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
 });

var-link=$（'.link'）；
link.click（函数（）
{
var big_image_url=$（this.attr（'href'）；
var big_img=$（'
完整网页（非常简单）的实现如下所示：

！[在此处输入图像描述][1][1]：当您第一次单击图像时，您会看到预览。然后如果您单击图像上角的按钮，它将变为完整大小，我只希望它显示在当前框中，但图像将是完整的，而不是框中。因此，我可以将图像拖动到框中任何我想要的位置，以查看完整图像，而不会丢失任何质量。我感到非常震惊，我确实这样做了不太了解你：（我发布的内容会显示一些小图片，点击时会显示完整版本的图片（它会显示你提供url的图片），并且可以拖动。如果你想在纯演示的框中显示它，那么你可以使用css
img\draggable添加{padding:12px；background:#fff；border radius:9px；}
或其他什么。但是为了更好地理解您，可以尝试实现一些javascript，然后将其添加到原始问题中，这样我们就可以看到哪里出了问题？