JS特效-鼠标事件-进度条

最新推荐文章于 2024-03-12 19:30:34 发布

原创最新推荐文章于 2024-03-12 19:30:34 发布 · 903 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#JS特效 #进度条 #鼠标事件

这篇博客分享了一个利用JavaScript实现的进度条特效案例，重点介绍了如何结合鼠标事件来控制进度条的动态变化，适合前端开发者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是今天写的进度条案例，主要用到了鼠标事件，分享出来给大家~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>进度条</title>
	<style>
	#progress{
		width: 1000px;
		height: 35px;
		line-height: 35px;
		margin: 100px auto;
		position: relative;
	}
	#progress_bar{
		width: 900px;
		height: 100%;
		background: #e8e8e8;
		border-radius: 8px;
	}
	#progress_bar_fg{
		width: 0;
		height: 100%;
		background: orange;
		border-top-left-radius: 8px;
		border-bottom-left-radius: 8px;
	}
	span{
		position: absolute;
		top: -7px;
		left: 0;
		width: 30px;
		height: 49px;
		background: orange;
		border-radius: 5px;
		cursor: pointer;
	}
	#progress_value{
		position: absolute;
		right: 30px;
		top: 0;
	}
	</style>
</head>
<body>

<div id="progress">
	<div id="progress_bar">
		<div id="progress_bar_fg"></div>
		<span></span>
	</div>
	<div id="progress_value">0%</div>
</div>


<script>
	window.onload = function(){

		// 1.获取需要的标签
		var oProgress = document.getElementById('progress');
		var oProgress_bar = oProgress.children[0];
		var oProgress_value = oProgress.children[1];
		var oProgress_bar_fg = oProgress_bar.children[0];
		var mask = oProgress_bar.children[1];

		// 2.监听鼠标按下
		mask.onmousedown= function(e){
			// 2.1获取初始位置
			var event = e || event;
			// var x = event.clientX - oProgress.offsetLeft;
			// 2.2监听鼠标的移动 将事件源给document比较合理 记住return false;
			document.onmousemove = function(e){
				var event = e || event;
				// 2.3获取移动的位置
				// event.clientX - oProgress.offsetLeft
				var x = event.clientX - oProgress.offsetLeft;
				if( x<=0 ){
					x = 0;
				}else if( x>=oProgress_bar.offsetWidth - mask.offsetWidth ){
					x=oProgress_bar.offsetWidth - mask.offsetWidth;
				}
				mask.style.left = x + 'px';
				oProgress_bar_fg.style.width = x + 'px';
				oProgress_bar_fg.style.backgroundColor = 'orange';
				oProgress_value.innerHTML = parseInt((x/870)*100) + '%';

				return false;
			}
		}

		document.onmouseup = function(){
			document.onmousemove=null;
		}


	}
</script>
</body>
</html>