Hola, Patricio, quizá deberías ser un poco más específico acerca de qué es lo que se te complica, porque no queda claro si es cómo capturar el movimiento de la rueda o cómo simular visualmente el llenado o el vaciado. También ayudaría ver qué es lo que has intentado.
Si tu duda es acerca del movimiento de la rueda quizá te sirva esto un poco:
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
#test{ background:red; color:#FFF; text-align:center; line-height:200px; width:500px; height:200px;}
</style>
<script>
var contador=0;
function $(x){return document.getElementById(x);}
function sc(delta,el){
if (delta < 0){
contador++;
}else{
contador--;
}
el.innerHTML=contador;
}
onload=function(){
if (window.addEventListener)
$('test').addEventListener('DOMMouseScroll', function(e) {
if (e.preventDefault)
e.preventDefault();
sc(-e.detail,this);
return false;
}, false);
$('test').onmousewheel = function () {
sc(event.wheelDelta,this);
return false;
}
}
</script>
</head>
<body>
<div id="test">Poner el mouse encima y mover la rueda</div>
</body>
</html>