我需要制作一个图像查看器，允许将大图像加载到容器中，然后在容器内拖动，以便可以查看整个图像，但永远不会将图像拖出边界。下面的代码工作完美，只是滚动条没有准确地与拖动图像的位置同步并且允许图像滚动到边界之外。如何在拖动图像时使滚动条与图像同步？
编辑:
Here是一个工作示例
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style>
.container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;}
#screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;}
</style>
</head>
<body>
<div class="container">
<div id="screen">
<img class="drag-image" id="draggable" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function () {
CreateDraggablePicture();
});
});
function CreateDraggablePicture() {
var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1;
var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1;
var x2 = $('#screen').offset().left;
var y2 = $('#screen').offset().top;
$("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true });
}
</script>
最佳答案
这些插件似乎与您在此处描述的效果相同
- http://www.azoffdesign.com/overscroll (似乎是最好的)
- http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html (虽然我没有找到下载链接)
- http://the-taylors.org/jquery.kinetic/ (没有看到滚动条的选项，但它对移动设备友好)
关于javascript - Jquery Draggable 没有正确定位滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9711482/