直播站开发记录之滑动条

设置标签

首先放一个progress标签，然后给标签设置一个class或者id属性。然后设置标签的max 和value

绑定标签到函数

slider("#idname");这样就ok了。进度条样式自己可以去实现

代码

function slider(selector){
	var sliderObj = $(selector);
	if(!sliderObj.is('progress')){
		console.log('please use progress tag!');
		return;
	}
	var sliderMax = sliderObj.attr('max');
	sliderObj.on('mousedown', function(event){
		this.value = Math.floor(this.max * (event.offsetX / sliderObj.width()));
		window.mouseStatus = 1;
	});
	sliderObj.on('mousemove', function(event){
		if(window.mouseStatus == 1)
			this.value = Math.floor(this.max * (event.offsetX / sliderObj.width()));
	});
	sliderObj.on('mouseup', function(event){
		window.mouseStatus = 0;
	});
	sliderObj.on('mouseout', function(event){
		window.mouseStatus = 0;
	});
}

PS 还需要jQuery支持