超過圖像移動DIV顯示工具提示

Question

我所擁有的是：

1. 我已經展示了一個餅圖
2. 我有餅圖
3. 默認瀏覽器的圖像地圖的圖像提示顯示在鼠標移過圖像

我所試圖做的是：

1. 在餅圖切片touchmove，循環相對於餅圖的路徑上移動的綠色標記（一個div）

我想達到的目標：

1. 無論是表演默認瀏覽器工具提示移動圓形到圓形圖
2. 要麼在顯示圖像周圍移動綠色標記（div）時顯示餅圖區域的值

我該如何做到這一點？

一些代碼：
小提琴鏈接：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爲了靈活性，您並不需要檢查拖動狀態，因爲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/

Answer 2

你爲什麼不使用標準庫，如HighCharts，讓它處理提示信息，要顯示。