图像鼠标悬停平移方程？

Question

我有一个简单的jQ脚本：

1. 设置的宽度/高度容器
2. 风景img（可以大于或小于容器）
3. 当用户将鼠标悬停在图像上时，它会平移（无单击/拖动），直到到达末尾

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

这可以很好地工作，但是鼠标到img的末尾留了一个空格。

小提琴

$("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);
});

有人可以帮忙吗？ 我希望一旦鼠标到达末尾，img将完全与容器的右侧对齐。

Answer 1

正确的公式是： -1 * (d/c) * (b - c)

或者，更清楚地说： -1 * (mouseX / figureWidth) * (imgWidth - figureWidth)

(mouseX / figureWidth)表示鼠标所处的图形宽度的百分比。 这是介于0和1之间的数字。

(imgWidth - figureWidth)表示要用于将图像放置在相反侧的最大X值。

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

更新小提琴

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

Answer 2

这应该工作： http : //jsfiddle.net/0zd5t1wf/4/

我只是获得图像左属性的极限值（图像宽度-图形框）

$("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');
            });
    }
});