电影投资组合使用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