拖动鼠标事件抖动 - onmousemove

Question

通过 youtube 为无铬播放器开发一个擦洗栏。我的功能几乎与 Id 一样工作，但是当我单击拖动蓝色“搜索器”按钮并将其拖动时，它会跳回其原始位置直到我释放鼠标单击。一旦我释放，它会在适当的位置开始播放视频，并在适当的位置绘制进度条。代码在这里：http://jsfiddle.net/VysBU/1/

我还记录了鼠标的位置和进度条的宽度（这是跳跃的部分），并且宽度值在拖动时始终向上或向下移动，这是没有意义的，因为从视觉上看，它会向后跳并向前。奇怪的。

感谢您提供任何帮助...如果您需要我澄清某些事情，请告诉我。

注意：刚刚记住...它倾向于仅在垂直鼠标移动时跳跃。即，如果我水平移动鼠标而不改变它的垂直位置，它“动画”很好。如果垂直位置确实移动，则“动画”是不稳定的。

Answer 1

看看这个http://jsfiddle.net/sz4FF/

你需要停止间隔

setInterval(animateProgress, 100); 

当你开始寻找，当寻找停止时继续。它之所以会跳转，仅仅是因为调用了 animateProgress 并设置了playedBar 和 seeker 的宽度。

我匆忙将它添加到一个全局函数 (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);

更新：IE8及以下问题

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

onmousemove 返回的事件在 ie7 和 8 中是“未定义的”，这样我们正在检查 window.event.clientX，它显示了鼠标相对于窗口的位置。它似乎工作正常，但我相信在正常环境中可能需要一些小的调整