2012-05-18 67 views
0

我想弄清楚如何模擬iOS上的懸停/ mouseenter功能,並帶有touchmove事件。在多個Div上模擬HTML懸停觸摸

我想在iOS上覆制BigGraph懸停效果。如果你不熟悉它,鏈接如下。請注意,當您將鼠標懸停在廣場上時,它們會展開,然後在懸停移除時摺疊。

http://isotope.metafizzy.co/custom-layout-modes/big-graph.html

在BigGraph,你會發現在行爲懸停,我試圖複製一個觸摸屏設備上。我正在努力想出一種方法來在屏幕上移動你的手指並使這些盒子擴大。由於懸停不受支持,我認爲觸摸移動將是一種選擇。

我已經能夠使用touchstart和touchend事件來擴展項目,但看起來touchmove沒有辦法捕捉到你正在盤旋的DIV,所以我無法捕獲該項目來擴展它。

下面是一個簡單的片段,任何想法將不勝感激。 THX

$(".item").bind("touchstart", function(e){ 
    log("touch start"); 
    $(e.currentTarget).find('.icon').css("background-color", "red"); 
    e.preventDefault(); 
}); 

$(".item").bind("touchend", function(e){ 
    log("touch end"); 
}); 

.big-graph .item:hover .icon { 
    -webkit-transform: scale(2); 
    -moz-transform: scale(3); 
     -ms-transform: scale(3); 
     -o-transform: scale(3); 
      transform: scale(3); 
} 

回答

0

我不知道你想與touchmove捕捉到的東西。但是,模擬展開和摺疊

$('.item').bind('touchstart', function() { 
    // expand box 
}); 

$('.item').bind('touchend', function() { 
    // collapse 
}); 

我不認爲你需要touchmove可言,除非我失去了一些東西的箱子徘徊。也許有一種你想要但沒有提到的行爲?

+0

在BigGraph中,您會注意到懸停行爲,我試圖在觸摸設備上進行復制。我正在努力想出一種方法來在屏幕上移動你的手指並使這些盒子擴大。由於懸停不受支持,我認爲觸摸移動將是一種選擇。 – Greg

+0

你嘗試touchmove,只是返回false,我不知道它會是什麼效果,但試試看看會發生什麼。但通常情況下,觸摸設備上的人們不會像那樣拖動手指,除非他們想要滑動。所以也許你不必擔心這個問題 – Huangism

0

我不是一個iOS程序員,但可以用某種方式使用多點觸控功能嗎?例如,1指觸摸是「點擊」; 2指觸摸是一個「懸停」。或者一個切換按鈕(點擊/懸停)。

+0

這個答案應該是一個評論。 –