html 亮暗调节条,前端|滑动条调节页面亮度

window.onload  = function(){

var  control_bar = document.getElementsByClassName("control_bar")[0];

var  control_bar_mask = document.getElementById("control_bar_mask");

var  control_bar_cursor =  document.getElementsByClassName("control_bar_cursor")[0];

var  def_left = control_bar_cursor.offsetLeft;

var  mask = document.getElementsByClassName("mask")[0];

document.body.onmousedown  = function(){

window.onmousemove  = function(){

var  cursor_X = event.clientX;

var  cursor_Y = event.clientY;

if(cursor_X  < def_left){

control_bar_cursor.style.left  = 0;

}else  if(cursor_X > control_bar.offsetWidth + def_left){

control_bar_cursor.style.left  = control_bar.offsetWidth;

}else{

control_bar_cursor.style.left  = cursor_X - def_left + "px";

}

//亮度比

var  proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth  - 1);

control_bar_mask.style.width  = proportion * control_bar.offsetWidth + "px";

mask.style.opacity  = 1 - proportion;

};

window.onmouseup  = function(){

window.onmousemove  = null;

};

};

};