css缩放/-webkit-transform后jquery点击位置

Question

我有一个使用固定 CSS 宽度的 Web 应用程序。 （1280 像素）。

使用 jquery，我添加了类似

的内容

$("html").css("zoom",window["zoomRatio"], "important");

还有-webkit-transform 和 Mozilla 的那个。

一切正常，除了我意识到我的一个带有 jquery flot 插件的图表不起作用（工具提示仍然在缩放之前的原始位置触发）

查看它，我意识到是 jquery.bind() 导致了问题。无论如何我可以改变鼠标悬停的位置吗？

基本上我正在寻找一种方法来假装鼠标处于不同的位置。我在网上查找了这些信息，但找不到太多有用的信息。

谢谢

编辑（我的工具提示代码）

   function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if ($("#enableTooltip:checked").length > 0) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                showTooltip(item.pageX, item.pageY,
                            item.series.label + " of " + x + " = " + y);
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;            
        }
    }
});

Answer 1

由于您的 工具提示 具有为该函数提供的传入 x 和 y 值，因此您需要测试当前缩放条件是否为 true。

编辑：这是通过创建一个新的if statement 来完成的，该if statement 具有两个新变量zoomActivated 和zoomOnset，以使用您现有的标记。只要缩放条件为真，就会调用此 if 语句。

片段代码示例：

function showTooltip(x, y, contents) {

    if(zoomActivated){

        x = x + zoomOnset;
        y = y + zoomOnset;

    }

    $('<div id="tooltip">' + contents + '</div>').css( { ....

上面将检查zoomActivated 是否为布尔值true，如果是，则调整x 和y 以补偿受缩放方法影响的对象位置.该变量在您调用 jQuery 缩放方法时设置为 true，并在该缩放方法完成/返回到原始状态时重置为 false。

全局变量zoomOnset 基于当前缩放幅度，假设缩放同时针对x 和y。实际值是反映固定缩放值的固定值。