拖動鼠標事件jittery - onmousemove

通過youtube爲chromeless播放器在擦洗棒上工作。當我點擊拖動藍色「搜索器」按鈕並拖動它時，我的功能非常類似於Id，但它跳回原始位置直到我釋放鼠標單擊。一旦我釋放，它就會在適當的位置啓動視頻，並在相應的位置繪製進度條。代碼在這裏：http://jsfiddle.net/VysBU/1/拖動鼠標事件jittery - onmousemove

我還記錄了鼠標的位置和進度條（它是跳轉的部分）的寬度，並且寬度值在拖動時一直向上或向下移動，這是沒有意義的，因爲在視覺上，它來回跳動。奇。

任何幫助表示讚賞......如果您需要我澄清某事，請告訴我。

注意：只記得......它往往只能在垂直鼠標移動上跳躍。即，如果我水平移動鼠標而不改變其垂直位置，它'動畫'很好。如果垂直位置確實移動，那麼'動畫'是不穩定的。

來源

2011-06-17 brad

找不到問題，但只是爲了讓你知道這裏有官方的jQuery UI滑塊http://jqueryui.com /演示/滑塊/。它會爲你解決跨瀏覽器的問題帶來很多麻煩，所以請使用它，除非你有特定的理由不這樣做。 – bcoughlan

檢查了這一點http://jsfiddle.net/sz4FF/

你需要停止的

setInterval(animateProgress, 100);

當你開始尋求

的間隔，尋求停止時繼續吧。它之所以能夠進行跳轉只是因爲animateProgress被調用並設置了播放條和搜索條的寬度。

我匆忙地將它添加到一個全局函數（window.TEST_INTERVAL）只是爲了檢查它是否會起作用，它確實如此。

（如何初始化和清除間隔）

clearInterval(TEST_INTERVAL); 
TEST_INTERVAL = setInterval(animateProgress, 100);

內尋求

function seeking(e){ 
     clearInterval(TEST_INTERVAL);

內doneSeeking

function doneSeeking(e){ 
     TEST_INTERVAL = setInterval(animateBuffer, 250);

UPDATE：IE8和以下問題

mousePos = e==undefined ? event.clientX : e.pageX; 
    //get the position of the mouse 
    //mousePos = e.pageX;

由onmousemove返回的事件在ie7和8中是「未定義的」，這樣我們檢查window.event.clientX，它顯示了相對於窗口的鼠標位置。它似乎工作正常，但我相信在一個正常的環境可能需要一些小的調整

來源

2011-06-17 22:19:36 Pantelis

太棒了。謝謝。實際上，我幾秒鐘之前就明白了這一點，並將其作爲一種不同的（不太優雅的）方式。基本上，我添加了一個布爾標誌'notSeeking'，它被添加到if語句中，該語句控制animateProgress中的動畫，並在seek（）中將其設置爲false，並在doneSeeking（）中將其設置爲true。它的工作原理，但Pantelis的答案更好。謝謝。 – brad

關於此問題的另一個說明，它在IE中不起作用。任何想法爲什麼？ – brad

嘿，再次。檢查這一個！ http://jsfiddle.net/sz4FF/ （我會編輯我的上述文章） – Pantelis

拖動鼠標事件jittery - onmousemove

回答

相關問題