进度条，自定义，有刻度

Html

Css


    

    
    








0MBPS
20MBPS
60MBPS
120MBPS
200MBPS





MBPS

* {
	margin:0;
	padding:0;
}
.scroll {
	margin-left:100px;
	margin-top:100px;
	width:600px;
	height:5px;
	background:#ccc;
	position:relative;
}
.bar {
	width:8px;
	height:18px;
	border:2px solid #22b9e9;
	background-color:#FFFFFF;
	position:absolute;
	top:-8px;
	left:0px;
	cursor:pointer;
}
.mask {
	position:absolute;
	left:0;
	top:0;
	background:#22b9e9;
	width:0;
	height:5px;
}

var scroll = document.getElementById('scroll');
var bar = document.getElementById('bar');
var mask = document.getElementById('mask');
var ptxt = document.getElementsByClassName('tushi')[0];
var barleft = 0;
bar.onmousedown = function(event) {
    var event = event || window.event;
    var leftVal = event.clientX - this.offsetLeft;
    var that = this;
    // 拖动一定写到 down 里面才可以
    document.onmousemove = function(event) {
        var event = event || window.event;
        barleft = event.clientX - leftVal;
        if (barleft < 0)
            barleft = 0;
        else if (barleft > scroll.offsetWidth - bar.offsetWidth)
            barleft = scroll.offsetWidth - bar.offsetWidth;
        mask.style.width = barleft + 'px';
        that.style.left = barleft + "px";
        ptxt.innerHTML = " " + parseInt(barleft / (scroll.offsetWidth - bar.offsetWidth) * 200);

//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }

}
document.onmouseup = function() {
    document.onmousemove = null; //弹起鼠标不做任何操作
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

进度条，自定义，有刻度



代码描述：进度条，可拖拽，源生js

进度条主要使用js实现的，代码不是太多看看就好啦，再放在代码里面套用一下就好了，刻度我用的方法比较弱智，直接是span加div定位写的，刻度是按照比例算的，要是有更好的解决办法记得私信我呀

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

团团圆

相关代码

进度条，自定义，有刻度

最新