jquery在css zoom / -webkit-transform后点击位置 [英] jquery click position after css zoom / -webkit-transform

问题描述

我有一个使用固定css宽度的web应用程序。 （1280px）。

使用jquery，我添加了类似于

  $（html ）.css（缩放，窗口[zoomRatio]，重要）; 
  

以及 -webkit-transform 和一个为mozilla。

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

考虑到这一点，我意识到导致问题的是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; 
} 
} 
}）; 
  

解决方案

因为您的工具提示为该功能提供的 x 和 y 值，您需要测试缩放条件当前是否为 true 。

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

片段代码示例：

  function showTooltip（x，y，contents）{
 
 if（zoomActivated）{
 
x = x + zoomOnset; 
 y = y + zoomOnset; 
 
 
 $ b $（'< div id =tooltip>'+ contents +'< / div>'）。css（{.... 
  

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

全局变量 zoomOnset 是基于当前缩放幅度，假设缩放比例为 x 和 y 。实际值是一个反映固定的缩放值。

I have a web application that uses fixed css width. (1280px).

With jquery, I added something like

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

as well as -webkit-transform and the one for mozilla.

Everything works fine, except I realized that one of my chart with the jquery flot plugin doesn't work (tooltip remained to be triggered at the original position before zoom)

Looking into it, I realized that it is the jquery.bind() that caused the problem. Is there anyway I can alter the mouseover position?

Basically I am looking for a way to pretend the mouse is at a different position. I looked for this information online, but I cant find much useful info.

Thanks

Edit (my code for the tooltip)

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

解决方案

Because your tooltip has incoming x and y values provided for that function, you need to test if a zoom condition is currently true.

Edit: This is done by creating a new if statement with two new variables of zoomActivated and zoomOnset to work with your existing markup. This if statement will be invoked whenever a zoom condition is true.

Fragment code example:

function showTooltip(x, y, contents) {

    if(zoomActivated){

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

    }

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

The above will check to see if zoomActivated is Boolean true and if so will adjust both x and y to compensate for the objects position that's affected by the zoom method. That variable is set true when you are calling your jQuery zoom method, and reset to false when that zoom method has completed/returned to original state.

The global variable zoomOnset is based on the current zoom magnitude, assuming that the zoom is for both x and y. The actual value is a fixed value reflective of the fixed zoom value.

这篇关于jquery在css zoom / -webkit-transform后点击位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！