css - 在图像上移动 div 时显示工具提示

Question

我拥有的是:

1. 我显示了一张饼图图片
2. 我有饼图的图像图
3. 默认的浏览器工具提示在鼠标移到图像上时显示

我想做的是:

1. 在饼图切片 touchmove 上，在相对于饼图的圆形路径上移动绿色标记(一个 div)

我想要实现的目标:

1. 在将 div 圆形移动到饼图时显示默认浏览器工具提示
2. 在图像周围移动绿色标记 (div) 时显示饼图区域的值

我如何实现这一目标？

一些代码:
fiddle 链接:here

$("img").bind("touchmove",function(event) {
    e=event.originalEvent;
    x1 = e.pageX;
    y1 = e.pageY;
    x = x1 - x0;
    y = y1 - y0;

    r = 180 - ((180/Math.PI) * Math.atan2(y,x));

    $("#marker").css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)');

    // Code to show values of Pie as a tooltip or in a separate div
});

Answer 1

令人惊讶的是，你的问题可以只用 CSS 来解决(注意，我还没有检查这是否适用于触摸设备，但它应该):

area {
    display:block;
    position: absolute;
}

area:after {
    background: red;
    color: white;
    position: absolute;
    display: block;
    white-space: nowrap;
}

area:hover:after {
    content: attr(title);
}

但是，如果您想保留 javascript 以获得灵 active ，您实际上不需要检查拖动状态，因为 touchmove 意味着手指已按下。你不应该需要嵌套的窗口加载事件(它不会在 Chrome 中触发，无论如何)。这稍微简化了代码。

$(document).ready(function(){
    var angle=180;
    var x0, y0;
    var x, y, x1, y1, drag = 0;
    var content=$("#content");
    var img=$("#myimage");
    var imgpos = img.position();
    var marker = $("#marker");
    var info = $("#info");


    $(document).bind('touchmove touchstart',function(e){

        e.originalEvent.preventDefault();
    });

    img.removeAttr("width");
    img.removeAttr("height");

    x0 = imgpos.left + (img.width() / 2);
    y0 = imgpos.top + (img.height() / 2);

content.on("touchmove mousemove", "map", function(event) {
    e=event.originalEvent;
    x1 = e.pageX;
    y1 = e.pageY;
    x = x1 - x0;
    y = y1 - y0;
    r = 180 - ((180/Math.PI) * Math.atan2(y,x));
    marker.css('-webkit-transform','rotate(-'+r+'deg) translate(-160px)');
    info.text(event.target.getAttribute('title'));
});

});

您可以在此处查看两种实现方式:http://jsfiddle.net/Wz7fF/