Javascript 鼠标悬停的图像方程？

我有一个简单的jQ脚本：

设置宽度/高度的容器

景观img（可以更大，也可以更大） （比容器小）

当用户将鼠标移到图像上时，图像会平移 （无需单击/拖动）直到到达终点

向左移动img的方程式如下： -1（相对鼠标位置）*（img宽度）/（容器宽度）

这很好，但当鼠标到达img末端时，会留下一个空间

有人能帮忙吗？我希望一旦鼠标到达末端，img完全对准容器的右侧。

这应该可以：

我只得到图像左属性的极限值（图像宽度-数字框）

$（“图img”）。每个（函数（）{
如果（$（此）.width（）>=（$（此）.height（）*2.5））{
$（本）
.attr（“类”、“全景”）
.mousemove（函数（e）{
var a=$（此），
b=$（this）.width（），
c=a.宽度（），
d=（e.clientX-a.offset（）.左），
新左=-1*（d*b/c），
limitValue=parseInt（$（this.width（））-parseInt（$（“figure”）.width（））；
if（newLeft<0&（newLeft*-1）
正确的公式是：
-1*（d/c）*（b-c）

或者更清楚地说：
-1*（mouseX/figureWidth）*（imgWidth-figureWidth）

（mouseX/figureWidth）
表示鼠标所在图形宽度的百分比。它将是一个介于0和1之间的数字

（imgWidth-figureWidth）
表示要用于将图像定位在另一侧的最大X值

将百分比乘以移动的总范围可以得到当前鼠标位置的移动量


我建议使用更具描述性的变量名，如
figureWidth
、
imgWidth
、
mouseX
等。这样不仅便于您理解，而且便于人们回答

$("figure img").mousemove( function (e) {
    var a = $(this).closest("figure"),
        b = $(this).width(),
        c = a.width(),
        d = (e.clientX - a.offset().left);
    $(this).css({
        left: -1*(d*b/c)
    }, 100);
});

$("figure img").each( function () {
    if($(this).width() >= ($(this).height() * 2.5)) {
        $(this)
            .attr("class", "panorama")
            .mousemove( function (e) {
                var a = $(this).closest("figure"),
                    b = $(this).width(),
                    c = a.width(),
                    d = (e.clientX - a.offset().left),
                    newLeft = -1*(d*b/c),
                    limitValue = parseInt($(this).width()) - parseInt($("figure").width());

                if ( newLeft < 0 && (newLeft *-1) < limitValue ){
                    $(this).css({
                        left: newLeft
                    }, 100);
                }
                $("#hello").html('why');
            });
    }
});