Menu

可以拖动的进度条jquery版,可移植到vue中使用

发布时间:2019-09-18 16:14:49作者:柯曾栎热度: 302 ℃

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<style type="text/css">
			.progress {
				position: relative;
				width: 300px;
				margin: 100px auto;
			}
			
			.progress_bg {
				height: 10px;
				border: 1px solid #ddd;
				border-radius: 5px;
				overflow: hidden;
				background-color: #f2f2f2;
			}
			
			.progress_bar {
				background: #5FB878;
				width: 0;
				height: 10px;
				border-radius: 5px;
			}
			
			.progress_btn {
				width: 20px;
				height: 20px;
				border-radius: 5px;
				position: absolute;
				background: #fff;
				left: 0px;
				margin-left: -10px;
				top: -5px;
				cursor: pointer;
				border: 1px #ddd solid;
				box-sizing: border-box;
			}
			
			.progress_btn:hover {
				border-color: #F7B824;
			}
		</style>
	</head>

	<body>
		<div class="progress">
			<div class="progress_bg">
				<div class="progress_bar"></div>
			</div>
			<div class="progress_btn"></div>
			<div class="text">0%</div>
		</div>
	</body>
	<script type="text/javascript">
		$(function() {
			var tag = false,
				ox = 0,
				left = 0,
				bgleft = 0;
			$('.progress_btn').mousedown(function(e) {
				ox = e.pageX - left;
				tag = true;
			});
			$(document).mouseup(function() {
				tag = false;
			});
			$('.progress').mousemove(function(e) { //鼠标移动
				if(tag) {
					left = e.pageX - ox;
					if(left <= 0) {
						left = 0;
					} else if(left > 300) {
						left = 300;
					}
					$('.progress_btn').css('left', left);
					$('.progress_bar').width(left);
					$('.text').html(parseInt((left / 300) * 100) + '%');
				}
			});
			$('.progress_bg').click(function(e) { //鼠标点击
				if(!tag) {
					bgleft = $('.progress_bg').offset().left;
					left = e.pageX - bgleft;
					if(left <= 0) {
						left = 0;
					} else if(left > 300) {
						left = 300;
					}
					$('.progress_btn').css('left', left);
					$('.progress_bar').animate({ width: left }, 300);
					$('.text').html(parseInt((left / 300) * 100) + '%');
				}
			});
		});
	</script>

</html>

米醋儿 micuer.com