老师,在做拖动条的时候有个问题
来源:4-8 video-javascript(5)
李小圆_
2019-09-29 18:01:07
以下是我的代码
CrlNode.onmousedown = function (e) {
console.log(e.clientX - this.offsetLeft);
e = e || event;
var oldLeft = e.clientX - this.offsetLeft;
document.onmousemove = function (e) {
e = e || event;
var currentLeft = e.clientX - oldLeft;
var maxLeft = LoadNode.offsetWidth;
currentLeft = currentLeft < -8.5 ? -8.5 :currentLeft;
currentLeft = currentLeft > maxLeft-8.5 ? maxLeft-8.5 : currentLeft;
CrlNode.style.left = currentLeft + 'px';
LineNode.style.width = currentLeft + 8.5 + 'px';
VideoNode.currentTime = currentLeft/maxLeft * VideoNode.duration;
}
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
console.log();
}
return false;
}最后拖动进度条的时候,进度条总是往回走一点,感觉应该时我算currentTime有问题,请问这样算为什么不对啊。下图为bug图

1回答
同学你好, 将同学的这段代码放在源码中测试, 确实是因为currentTime计算的有问题,出现同学贴图的情况, 出现的原因, 如下图所示, 在监听timeupdate时间中, 当前的进度条宽度和进度条按钮的left值都与currentTime有关系, 所以如果这个值计算不对的话, 会影响到效果的实现

建议: 可以在鼠标抬起onmouseup事件中计算currentTime, 这样在拖动按钮的过程中只在最后计算一次,防止拖动过程中多次计算哦

如果还有疑惑, 可以再次提问, 将你的完整代码粘贴过来, 便于老师准确高效帮助您解决问题
如果帮助到了你, 欢迎采纳!
祝学习愉快~~~~
相似问题