Question

我有一个简单的jQ脚本：

设置宽度/高度容器
风景img（可以更大或更大小于容器）
当用户将鼠标悬停在图像上时，它会平移（没有点击/拖动）直到它到达结尾

将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);
});

Answer 1

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

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

(mouseX / figureWidth)表示鼠标所在图形宽度的百分比。它将是0到1之间的数字。

(imgWidth - figureWidth)表示您想要用于将图像定位在另一侧的最大X值。

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

Updated Fiddle

我建议使用更多描述性变量名称，例如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');
            });
    }
});

图像鼠标悬停方程式？

2 个答案: