进度条特效

一、页面布局

1. html部分

• 进度条由两部分组成：progress_bar+value
  

<div id=\"progress\">
	<div id=\"progress_bar\">
		<div id=\"content\"></div>
		<span></span>
	</div>
	<div id=\"value\">0%</div>
</div>

1. CSS部分

• 定位：子绝父相。
• 有相对移动等（轮播图等），一定要记得定位！

<style type=\"text/css\">
		*{
			margin: 0;
			padding: 0;
			list-style: None;
			border: none;
		}
		#progress{
			width: 900px;
			height: 30px;
			line-height: 30px;
			margin: 100px auto;
			position: relative;
		}
		#progress_bar{
			width: 850px;
			height:100%;
			background-color:#ccc;
			border-radius: 10px;
			position: relative;
		}
		#value{
			position: absolute;
			right: 10px;
			top: 0;
		}
		#content{
			position: absolute;
			width: 0;
			height:100%;
			background-color: red;
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
		}
		span{
			position: absolute;
			width: 12px;
			height:40px;
			top: -5px;
			left: 0;
			background-color: black;
			cursor: pointer;
			border-radius: 10px;
		}
	</style>

二、JS特效

<script type=\"text/javascript\">
	window.onload=function(){
		//1.获取事件源
		var progress=document.getElementById(\'progress\');
		var progress_bar=progress.children[0];
		var value=progress.children[1];
		var content=progress_bar.children[0];
		var handle=progress_bar.children[1];

		//2.监听鼠标按下
		handle.onmousedown=function(event){
			var event=event||window.event//解决兼容问题
			//2.1获取handle的初始位置
			var x0=event.clientX-handle.offsetLeft;
			//2.2监听鼠标的移动
			document.onmousemove=function(event){
				event=event||window.event;
				//2.3获取鼠标移动的位置
				var x=event.clientX-x0;
				//边界处理
				if(x<0){
					x=0;
				}else if(x>progress_bar.offsetWidth-handle.offsetWidth){
					x=progress_bar.offsetWidth-handle.offsetWidth;
				}
				//2.4移动(content和handle)
				content.style.width=x+\'px\';
				handle.style.left=x+\'px\';
				value.innerHTML=parseInt(x/(progress_bar.offsetWidth-handle.offsetWidth)*100)+\'%\';
				return false;//结束该函数
				}
				//3.监听鼠标抬起，移动停止
				document.onmouseup=function(){
					document.onmousemove=null;
				}
			}
		}
	</script>

注意：

1. 在这个案列中，onmousemove的对象是document，即只要点击handle按下鼠标在网页内部移动鼠标即可；onmouseup同样如此。
2. 在document.onmousemove这个函数结束时，一定要加上return flase;这标识这onmousemove事件的结束，避免了onmouseup事件执行与之产生的冲突。
3. value的取整。