拖動(dòng)滾動(dòng)條
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? .scroll{
? ? ? ? ? ? margin: 50px;
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 5px;
? ? ? ? ? ? background: red;
? ? ? ? ? ? position: relative;
? ? ? ? }
? ? ? ? .bar{
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 20px;
? ? ? ? ? ? background: yellow;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: -7px;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .mask{
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? left: 0;
? ? ? ? ? ? top: 0;
? ? ? ? ? ? background: #369;
? ? ? ? ? ? width: 0;
? ? ? ? ? ? height: 5px;
? ? ? ? }
? ? </style>
</head>
<body>
<div class="scroll" id="scroll">
? ? <div class="bar" id="bar">
? ? </div>
? ? <div class="mask" id="mask"></div>
</div>
<p></p>
<script>
? ? var scroll = document.getElementById('scroll');
? ? var bar = document.getElementById('bar');
? ? var mask = document.getElementById('mask');
? ? var ptxt = document.getElementsByTagName('p')[0];
? ? var barleft = 0;
? ? bar.onmousedown = function(event){
? ? ? ? var event = event || window.event;
? ? ? ? var leftVal = event.clientX - this.offsetLeft;
? ? ? ? console.log('clientX 點(diǎn)擊位置距離瀏覽器窗口X軸距離+++++',event.clientX)
? ? ? ? console.log('this.offsetLeft bar元素距離父元素X軸距離+++++',this.offsetLeft)
? ? ? ? console.log('leftVal++++++++++++++++++++++',leftVal)
? ? ? ? var that = this; ?//bar元素
? ? ? ? // 拖動(dòng)一定寫(xiě)到 down 里面才可以
? ? ? ? console.log("down------------鼠標(biāo)點(diǎn)擊-------------------------")
? ? ? ? document.onmousemove = function(event){
? ? ? ? ? ? barleft = event.clientX - leftVal;
? ? ? ? ? ? console.log('clientX222222++++拖動(dòng)時(shí)位置距離瀏覽器窗口X軸距離++++++++++++',event.clientX)
? ? ? ? ? ? console.log('leftVal222222++++拖動(dòng)時(shí)滑塊初始位置++++++++++++++',leftVal)
? ? ? ? ? ? console.log('barleft++++++++拖動(dòng)時(shí)距離+++++++++++++++',barleft)
? ? ? ? ? ? console.log("move------------鼠標(biāo)拖動(dòng)--------------------------")
? ? ? ? ? ?
? ? ? ? ? ? if(barleft < 0)
? ? ? ? ? ? ? ? barleft = 0;
? ? ? ? ? ? else if(barleft > scroll.offsetWidth - bar.offsetWidth)
? ? ? ? ? ? barleft = scroll.offsetWidth - bar.offsetWidth;
? ? ? ? ? ? ? ? console.log('scroll的offsetWidth++++++scroll的物理寬度++++++++++',scroll.offsetWidth)
? ? ? ? ? ? ? ? console.log('bar的offsetWidth+++++++bar的物理寬度+++++++++++',bar.offsetWidth)
? ? ? ? ? ? mask.style.width = barleft +'px' ; ? //進(jìn)度條進(jìn)度(藍(lán)色條的長(zhǎng)度)
? ? ? ? ? ? that.style.left = barleft + "px"; ? ?//bar(滑塊)位置
? ? ? ? ? ? ptxt.innerHTML = "已經(jīng)走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%";
? ? ? ? ? ? //防止選擇內(nèi)容--當(dāng)拖動(dòng)鼠標(biāo)過(guò)快時(shí)候，彈起鼠標(biāo)，bar也會(huì)移動(dòng)，修復(fù)bug
? ? ? ? ? ? window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
? ? ? ? }
? ? }
? ? document.onmouseup = function(){
? ? ? ? document.onmousemove = null; //彈起鼠標(biāo)不做任何操作
? ? }
</script>
</body>
</html>
