|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <style type="text/css"> #bar{ width:200px; height:25px; border:1px solid black; position:relative; } #slider{ width:0%; height:100%; background-color:red; top:0px; left:0px; position:absolute; cursor:pointer; } #info{ width:200px; height:25px; border:1px solid black; } </style> <script type="text/javascript"> var bar, slider; function init(){ bar = document.getElementById('bar'); slider = document.getElementById('slider'); info = document.getElementById('info'); bar.addEventListener('mousedown', startSlide, false); bar.addEventListener('mouseup', stopSlide, false); } function startSlide(event){ var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2)); info.innerHTML = 'start' + set_perc + '%'; bar.addEventListener('mousemove', moveSlide, false); slider.style.width = (set_perc * 100) + '%'; } function moveSlide(event){ var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2)); info.innerHTML = 'moving : ' + set_perc + '%'; slider.style.width = (set_perc * 100) + '%'; } function stopSlide(event){ var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2)); info.innerHTML = 'done : ' + set_perc + '%'; bar.removeEventListener('mousemove', moveSlide, false); slider.style.width = (set_perc * 100) + '%'; } </script> </head> <body onload='init()'> <div id='bar'> <div id='slider'> </div> </div> <br /> <div id='info'>info</div> </body> </html> |