css 进度条

css 进度条

工作的时候根据网上提供的方法(忘了在哪里找到的了,如果侵权请告之),自己增加了些改动,做了一个简易进度条,

部分

/*进度条相关CSS #wrapper外层容器 #slider滑块 #fill填充部分*/
#wrapper{
    position: relative;
    left:55px;/*调整距离窗口左侧的距离,*/
    bottom:20px;/*调整距离窗口下部的距离*/
    width:90%;/*进度条宽度,该设置限制了进度条的最大长度*/
    height:5px;
    border:1px solid darkgray;
}
/*将滑块和填充块设置成inline-block,保证他们在同一行内*/
#slider{
    position: absolute;
    left:0;
    bottom:-2px;
    display: inline-block;
    cursor:pointer;
    width: 10px;      
    height: 10px;      
    background-color:#E6E6FA;      
    border:1px solid darkgray;
}
#fill{
	position: absolute;
    display: inline-block;
    left:0px;
    width:5px;
    height:5px;
    background: #6caf00;
}

js部分

var slider=(function(){
	    	init=function(){
	       		var wrapper=document.getElementById('wrapper');
	        	var slider=document.getElementById('slider');
	        	var fill=document.getElementById('fill');
	        	move(wrapper,slider,fill);
	    };
	    move=function(wrapper,slider,fill){
	    //drag用来存储滑块允许拖拽和不允许拖拽的状态
	        var drag=0;
	    //在滑动条上绑定click事件以实现点击任意位置,自动调整滑块和填充块的效果
	        wrapper.addEventListener('click',function (e) {
	            if(e.target===slider){
	            //点击滑块自身不做任何事情         
	            }else{
	                if(e.offsetX<20){
	                    slider.style.left='0px';
	                    fill.style.width='0px';
	                }else{
	                    slider.style.left=e.offsetX-10+'px';
	                    fill.style.width=e.offsetX-10+'px';
	                }
	            }
	        });
	        //修改drag的状态        
	        slider.addEventListener('mousedown',function(){
	            drag=1;
	        });
	        //释放按钮绑定在document上,保证在整个页面容器里面任何地方松开按钮都能修改drag的状态        
	        document.addEventListener('mouseup',function(){
	            drag=0;
	        });
	        // 使滑块和填充块跟随移动,这里使用的pageX,需要计算和视窗左侧的距离而不是和滑动块左侧的距离       
	        document.addEventListener('mousemove',function(e){
	            if(drag==1){
	                if(e.clientX<29){
	                    slider.style.left='0px';
	                    fill.style.width='5px';
	                }else if(e.clientX>wrapper.offsetWidth+10){
	                	slider.style.left=wrapper.offsetWidth;
	                	slider.style.width=wrapper.offsetWidth;
	                }else{
	                    slider.style.left=e.clientX-19+'px';
	                    fill.style.width=e.clientX-14+'px';
	                }
	            }
	        });
	    };
	    return {
	        init:init
	    }
	})();

/*调用*/
slider.init();

html部分

<!--外层容器-->
<div id="wrapper">
    <!--填充块-->
    <div id="fill"></div>
    <!--滑块-->
    <div id="slider"></div>
</div>

效果