1回答

好帮手慕慕子

2020-08-04

同学你好，老师针对整体的流程，给同学简单的画图解释一下：

1、ev.clientX返回当事件被触发时鼠标指针向对于浏览器页面水平坐标。

this.offsetLeft返回 元素距离已定位的父元素左侧的距离。

如下绿色表示的就是this.offsetLeft ，紫色表示的是ev.clientX。

所以l表示的就是如下蓝色区域

2、当鼠标移动时，用鼠标距离浏览器左侧的坐标减去l就是圆点应该设置的left值。

如下图所示：

红色线就是needX，即圆点到进度条左侧起点的距离 。而CrlNode.style.left 就是为圆点设置left值，即圆点现在的位置：

具体可以结合下图注释理解：

//拖拽进度条按钮
        CrlNode.onmousedown = function (e) {
            //是一个兼容性写法，每个事件函数都有一个event对象
            var ev = e || event;
            //offsetLeft是一个元素到父级左边的距离，就是鼠标按住的点到最左边的距离
            //clientX返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。
            //l是获取crlNode中心点距离页面左侧的距离
            var l = ev.clientX - this.offsetLeft;
            // 当拖拽进度条按钮时暂停视频播放
            VideoNode.pause();
            // 按钮移动事件
            document.onmousemove = function (e) {
                // 获取event事件对象
                var ev = e || event;
                // ev.clientX： 移动过程中鼠标距离最左边的距离
                // l ： 鼠标按下时距离页面的位置
                // needX 按钮需要拖拽过程中需要移动的距离
                var needX = ev.clientX - l;
                // 按钮可以移动的最大距离
                var maxX = LoadNode.offsetWidth - 8.5;
                //通过三元运算符判断移动的距离是否超过最大最小值
                needX = needX < -8.5 ? -8.5 : needX;
                needX = needX > maxX ? maxX : needX;
                // 设置按钮的left值，改变按钮的位置
                CrlNode.style.left = needX + 'px';
                // 计算进度条的宽度
                LineNode.style.width = (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth * 100 + '%';


            };
            // 鼠标抬起事件
            document.onmouseup = function () {
                // 清空鼠标移动和鼠标抬起事件，就是鼠标抬起之后，再拖拽就无效了。
                document.onmousemove = document.onmouseup = null;
                // 计算当前视频的时间
                VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth;
                //console.log((CrlNode.offsetLeft+9)/LoadNode.offsetWidth);
                //console.log()

                //VideoNode.play();
                //PlayBln = false;
                //className = 'pauseNode';
                // 切换按钮是播放还是暂停状态
                if (PlayBln == false) {
                    //console.log(1);
                    PlayNode.className = 'pauseNode';
                    VideoNode.play();
                }
                else {
                    //console.log(2);
                    PlayNode.className = 'playNode';
                    VideoNode.pause();
                }
            };
            return false;
        };

同学可以回顾视频，结合源码实现效果，帮助同学自己更好的理解

祝学习愉快~

0