Javript实现水平进度条拖拽效果

Html

Css

* {
	margin:0;
	padding:0;
}
.scroll {
	margin:100px;
	width:500px;
	height:5px;
	background:#ccc;
	position:relative;
}
.bar {
	width:10px;
	height:20px;
	background:#369;
	position:absolute;
	top:-7px;
	left:0;
	cursor:pointer;
}
.mask {
	position:absolute;
	left:0;
	top:0;
	background:#369;
	width:0;
	height:5px;
}

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;
    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) * 100) + "%";

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

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

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

立即下载

Javript实现水平进度条拖拽效果



代码描述：本文实例为大家分享水平进度条拖拽效果的js具体代码

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

驱魔人

相关代码

Javript实现水平进度条拖拽效果

最新