如果不重新创建它并查看这些数字的来源，我发现很难遵循这一点。然而，我最近为其他人做了一些与 jQuery 非常相似的东西，只是它在 div 中移动了一个 img。不过，将其切换为移动背景图像可能并不需要太多（尽管找出 bg 图像的尺寸会很棘手——在这种情况下你可能会更好地对它们进行硬编码）。
html:
<div class="container"><img src="foo.jpg" class="draggable"/>
</div>
jQuery：
//for each item
$(".container").each(function(){
//get the container width
var conWidth = $(this).width();
//and its height
var imgHeight = $(this).find("img").height();
//get the nested img width
var conHeight = $(this).height();
//and its height
var imgWidth = $(this).find("img").width();
//figure out how much of the image is not visible horizontally
var excessWidth = imgWidth - conWidth;
//and how much is not visible vertically
var excessHeight = imgHeight - conHeight;
//how far is this container from the left of the page
var containerPositionLeft = this.offsetLeft;
//and from the top
var containerPositionTop = this.offsetTop;
//when moving mouse over container
$(this).mousemove(function(e){
//figure out how many pixels the mouse is from the left edge of the page
var mouseoffLeftPage = e.pageX;
//and how many from the top edge of the page
var mouseoffTopPage = e.pageY;
//figure out how many pixels the mouse is from the left edge of the page
var mouseoffLeftPx = mouseoffLeftPage - containerPositionLeft;
//and how many from the top edge of the page
var mouseoffTopPx = mouseoffTopPage - containerPositionTop;
//figure out the distance the mouse is from the left edge as a percentage (kind of - all the way to the right equals 1 not 100)
var mouseoffLeftPercent = mouseoffLeftPx/conWidth;
//do the same for height
var mouseoffTopPercent = mouseoffTopPx/conHeight;
//times the 'percentage' value by the amount of image hidden - so if your conatiner is 200px wide, your image 300px wide nd your mouse is half way across this value would be 0.5*100 which would give you 50 - which is exactly half the amount of image that is missing.
//note this gets set as a minus value as we will be using a minus number to shift the image around.
var setnewWidth = -(mouseoffLeftPercent * excessWidth);
//do the same for the height
var setnewHeight = -(mouseoffTopPercent * excessHeight);
//add the values as css (using transform(translate) as it's more performant and does subpixel rendering so looks smoother [or does it? it does in animations but seems as my js is not technically animating it it might not make a difference in that respect] - could set the top,left version as fallback for unsupporting browsers but ie9 supports transforms anyway so i dont care.)
$(this).find("img").css({"transform" : "translate("+ setnewWidth+"px ,"+setnewHeight+"px)" });
//$(this).find("img").css({"left" : setnewWidth+"px", "top" : setnewHeight+"px" });
});
});
不是对代码中不起作用的直接答案，而是显示了一个示例（对正在发生的事情进行评论）如何完成 - 请注意，我的版本不依赖于您知道任何宽度或高度对象，并且可以在一个页面上的多个项目上运行 - 它也不必放置在页面的最顶部。它确实假设图像比它的容器大 - 如果它不是更大的图像只是在其中移动。您可以通过连续进行更多计算来减少变量的数量，我只是希望它尽可能易于阅读逻辑。
演示：
http ://codepen.io/chrisboon27/pen/BhkJq