老师,在做拖动条的时候有个问题

来源: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图

http://img.mukewang.com/climg/5d9080e00a0b71cf05270392.jpg

写回答

1回答

好帮手慕慕子

2019-09-29

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

http://img.mukewang.com/climg/5d908a6209b3041e10420443.jpg

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

http://img.mukewang.com/climg/5d908b2f098ae96313050605.jpg

如果还有疑惑, 可以再次提问, 将你的完整代码粘贴过来, 便于老师准确高效帮助您解决问题

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

0

0 学习 · 6815 问题

查看课程