Question

我正在尝试执行某些操作哪个正在观看像lighbox这样的大图像，但高分辨率让我们说1200x1600或更大，我想到的是查看一个绝对宽度和高度像800x600的灯箱，图像将在框内可拖动/可移动我认为这是可能的，但是有没有现成的Jquery插件？或者，如果我要制作自己的自定义灯箱，你能否给我一个如何让它在Div内部可拖动的提示。

Answer 1

一个小脚本会执行此操作。请阅读this post。我创建了一个小fiddle来尝试这个，它完美无缺。它可以很容易地包含在您的自定义灯箱内。以下是略有修改的原始代码

<script type='text/javascript' src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("img").draggable({ containment: [-500, -422, 0, 0], scroll: false });

    });

</script>

<style type="text/css">
    div {
        width:500px; 
        height:423px; 
        position:relative; 
        overflow:hidden;
    }
</style>

HTML是：

<div>
        <img src="http://megapack.ca/wp-content/uploads/2012/06/High-Resolution-Wallpapers-2.jpg" width="1000" height="845" alt="Map" />
</div>

Answer 2

尝试JQ Zoom，正如我在评论http://www.mind-projects.it/projects/jqzoom/

中提到的那样

如果JQZoom不符合您的需求，您还可以查看更多插件

http://www.tripwiremagazine.com/2012/12/jquery-image-zoom.html

JQuery灯箱里面的Draggable Image

2 个答案: