滑动条
加了范围限制
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .modia{ width: 800px; height: 400px; /* margin:0 auto; top:30px; left:200px; border:1px solid #eee; */ top: 50%; left: 50%; border:1px solid #eee; /* transform: translate(-50%, -50%); */ margin-top: -200px; margin-left: -400px; position: absolute; } .line{ top: 370px; left: 100px; width: 600px; height: 1px; background-color: red; position: relative; } .slider{ display: block; position: absolute; top: -9px; left: 0; height: 20px; width: 10px; /* border-radius: 50%; */ background-color: darkred; opacity: .5; } </style> <title>进度滑块</title> </head> <body> <div class="modia"> <div class="line"> <span class="slider"></span> </div> </div> <script> // const oDiv = document.getElementsByClassName('line')[0]; const oSpan = document.getElementsByClassName('slider')[0]; let disLeft = getElementPosition(oSpan) + 10; let disDrap = 0; oSpan.onmousedown = function(e){ document.onmousemove = function(e){ disDrap = e.clientX - disLeft; if(e.clientX <= disLeft){ disDrap = 0; } if(e.clientX >= disLeft + 580){ disDrap = 580; } oSpan.style.left = disDrap + 'px'; } document.onmouseup = function(e){ document.onmousemove = null; } } function getElementPosition(ele){ if(ele.offsetParent !== document.querySelector('body')){ return ele.offsetLeft + getElementPosition(ele.parentElement); } return ele.offsetLeft; } </script> </body> </html>
参考
https://www.cnblogs.com/dh-dh/p/9254172.html 用video标签流式加载
https://www.yisu.com/zixun/407340.html html5用video标签流式加载的实现
Leave a comment
0 Comments.