用console.log输出this.offsetLeft，为什么数值是进度条按钮到进度条左边的距离
来源：4-7 video-javascript（4）
weibo_我是LUFFCIER_0
2020-09-06 16:22:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
.outerNode{
width: 540px;
height: 332px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -166px;
margin-left: -270px;
box-shadow: 0 0 4px #5b606d;
background:black;
}
.outerNode .videoNode{
width: 100%;
height: 305px;
}
.outerNode .controlsNode{
width: 100%;
height: 27px;
float: left;
background: url(images/ctrs_bg.gif) repeat-x;
}
.outerNode .controlsNode .playNode{
float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url(images/playNode.png) no-repeat;
}
.outerNode .controlsNode .pauseNode{
float: left;
width: 15px;
height: 17px;
margin: 6px 0 0 14px;
background: url(images/pause.png) no-repeat;
}
.outerNode .controlsNode .loadNode{
float: left;
width: 267px;
height: 10px;
margin: 9px 0 0 14px;
background: url(images/load_bg.png) repeat-x;
position: relative;
}
.outerNode .controlsNode .loadLeft{
position: absolute;
left: 0;
top: 0;
width:3px;
height:10px;
background: url(images/left_bg.png) no-repeat;
}
.outerNode .controlsNode .loadRight{
position: absolute;
right: 0;
top: 0;
width:3px;
height:10px;
background: url(images/right_bg.png) no-repeat;
}
.outerNode .controlsNode .crlNode{
position: absolute;
left:-8.5px;
top: -3.5px;
width:17px;
height:17px;
background: url(images/crl_bg.png) no-repeat;
cursor: pointer;
z-index:5;
}
.outerNode .controlsNode .lineNode{
position: absolute;
left:0px;
top: 1px;
width:0;
height:17px;
background: url(images/line_bg.png) repeat-x;
}
.outerNode .controlsNode .lineNode .lineRight{
position: absolute;
right:0;
top:0;
width:2px;
height:100%;
background: url(images/line_r_bg.png) no-repeat;
}
.outerNode .controlsNode .timeNode{
float: left;
width:60px;
height:10px;
margin:9px 0 0 9px ;
font-size: 9px;
line-height: 9px;
color: white;
}
.outerNode .controlsNode .volumNode{
float: left;
width:17px;
height:16px;
margin:3px 0 0 17px ;
background: url(images/volume_bg.png) no-repeat
}
.outerNode .controlsNode .volumLine{
float: left;
width:61px;
height:8px;
margin:10px 0 0 4px ;
background: url(images/volumeLine_bg.png) repeat-x;
position:relative;
}
.outerNode .controlsNode .volumLeft{
position: absolute;
width:2px;
height:8px;
top: 0;
left: 0;
background: url(images/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumRight{
position: absolute;
width:2px;
height:8px;
top: 0;
right: 0;
background: url(images/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumCtr{
position: absolute;
left:-3.5px;
top: -3.5px;
width:15px;
height:13px;
background: url(images/vo_d.png) no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .fullNode{
float: left;
width:15px;
height:17px;
margin:6px 0 0 45px;
background: url(images/full_bg.png) no-repeat;
cursor: pointer;
}
.outerNode .controlsNode .fullNode:hover{
background: url(images/full_hover_bg.png) no-repeat;
}
</style>
</head>
<body>
<div class="outerNode">
<video src="data/imooc.mp4" class="videoNode" poster="data/poster.jpg"></video>
<div class="controlsNode">
<div class="playNode"></div>
<div class="loadNode">
<div class="loadLeft"></div>
<div class="loadRight"></div>
<div class="crlNode"></div>
<div class="lineNode">
<div class="lineRight">
</div>
</div>
</div>
<div class="timeNode">
<span class="now">00:00</span>
-
<span class="all"></span>
</div>
<div class="volumNode">
</div>
<div class="volumLine">
<div class="volumLeft"></div>
<div class="volumRight"></div>
<div class="volumCtr"></div>
</div>
<div class="fullNode">
</div>
</div>
</div>
<script type="text/javascript">
var PlayNode = document.getElementsByClassName('playNode')[0],
videoNode =document.getElementsByClassName('videoNode')[0],
playIn = true,
FullNode = document.querySelector('.fullNode'),
nowNode=document.querySelector('.now'),
allNode=document.querySelector('.all'),
lineNode=document.querySelector('.lineNode');
crlNode=document.querySelector('.crlNode');
PlayNode.onclick=function(){
if(playIn ==true){
this.className='pauseNode';
playIn = false;
videoNode.play();
}
else{
this.className='playNode';
playIn = true;
videoNode.pause();
}
}
FullNode.onclick=function(){
if(videoNode.webkitRequestFullScreen){
videoNode.webkitRequestFullScreen();
}
else if(videoNode.mozRequestFullSceen){
videoNode.mozRequestFullSceen();
}
else{
videoNode.RequestFullScreen();
}
}
videoNode.addEventListener('canplay',function(){
var needTime=parseInt(videoNode.duration);
var s=needTime%60;
var m=parseInt(needTime/60);
var timeNum=toDou(m)+':'+toDou(s);
allNode.innerHTML=timeNum;
},false);
function toDou(time){
return time<10?'0'+time:time;
}
videoNode.addEventListener('timeupdate',function(){
lineNode.style.width=videoNode.currentTime/videoNode.duration*100+'%';
crlNode.style.left=videoNode.currentTime/videoNode.duration*267-3.5+'px';
var needTime=parseInt(videoNode.currentTime);
var s=needTime%60;
var m=parseInt(needTime/60);
var timeNum=toDou(m)+':'+toDou(s);
nowNode.innerHTML=timeNum;
},false);
crlNode.onmousedown=function(e){
var ev=e || event;
var l = ev.clientX - this.offsetLeft;
console.log(this.offsetLeft);
document.onmousemove=function(e){
var ev=e || event;
var needX = ev.clientX-l;
needX=needX<-8.5?-8.5:needX;
crlNode.style.left=needX+'px';
};
document.onmouseup=function(e){
document.onmousemove=document.onmouseup=null;
}
}
</script>
}
}
</body>
</html>
1回答
-
好帮手慕码
2020-09-06
同学你好，效果是正确的，offsetLeft 获取的是当前元素距离有定位属性（除了static以为的定位）的先辈元素的距离，如果所有的先辈元素都没有设置定位属性，那么计算的就是当前元素距离窗口左侧的距离；
那么crlNode元素的想先辈元素，loadNode是设置了定位的，因此获取的是按钮到loadNode的距离。
祝学习愉快~
0
相似问题