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

使用Jquery的电影组合图像

1 个答案: