关于老师源码offsetLeft

来源:4-7 video-javascript(4)

立志成为大佬的咸鱼

2019-11-13 13:52:53

CrlNode.onmousedown = function(e){

var ev = e || event;

var l = ev.clientX - this.offsetLeft;

console.log(this.offsetLeft);

VideoNode.pause();


document.onmousemove = function(e){

var ev = e || event;

var needX = ev.clientX - l;

var maxX = LoadNode.offsetWidth - 8.5;


needX = needX < -8.5 ? -8.5 : needX;

needX = needX > maxX ? maxX : needX;

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;

};


我console.log(this.offsetLeft); 发现结果为-9  这里的结果为什么会是-9? 这个属性不是元素到浏览器最左边距离的属性吗? 还有var l=event.clientX-this.offsetLeft; 这里为什么要减去这个this.offsetLeft 感觉可以直接等于event.clientX啊,求解

写回答

1回答

好帮手慕糖

2019-11-13

同学你好,关于你的问题,解答如下:

1、这不是一个固定的值,是会改变的,你可以拖动下控制条,会发现其是改变的。

2、offsetLeft 获取的是当前元素距离有定位属性(除了static以为的定位)的先辈元素的距离,如果所有的先辈元素都没有设置定位属性,那么计算的就是当前元素距离窗口左侧的距离;

this是crlNode元素。该元素最初设置的相对于父元素的left值,就是-8.5px,根据浏览器的不同,稍微有点误差,所以获取的时候,就可以是-8或者-9;这是最开始的,当拖动之后,就改变了。

http://img1.sycdn.imooc.com/climg/5dcbab890997d03903080235.jpg

3、clientX是当前的水平坐标,不是固定的值,如下:分别输出下,会发现在移动的过程中,clientX的值是一直在改变的,所以得到的值也是不同的,不能直接使用clientX。

http://img1.sycdn.imooc.com/climg/5dcbad7609a8006106000389.jpg

http://img1.sycdn.imooc.com/climg/5dcbad7609541d4217010168.jpg

两个相减得到的是移动的距离;clientX是当前的水平坐标,可以使用这两个方式对比下。

如果我的回答帮助了你,欢迎采纳。祝学习愉快!


0

0 学习 · 6815 问题

查看课程