Let's take a look at the effect:
Effect description:
Move the mouse over the progress bar to change the progress value.
Compatibility:
Perfect compatibility with IE6, IE7, IE8, Chrome, and Firefox
Code:
Copy codeThe Code is as follows:
<Script style = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"> </script>
<Style type = "text/css">
# Prg {
Font-size: 12px;
Height: 100%;
Margin-bottom: 3px;
Overflow: hidden;
Color: # 2C2C2C;
Font-family: Arial, Tahoma, "Bitstream Vera Sans", sans-serif;
}
# Prg. txt {
Min-width: 50px; width: auto; float: left;
}
# Prg. num {
Color: #656565;
Font-style: normal;
Margin: 0 6px;
}
# Prg. load {
Background-color: # F6F5F5;
Border: 1px solid # BBBBBB;
Height: 10px;
Float: left;
Margin-top: 1px;
Position: relative;
}
# Prg # p {
Background-color: # F9AE3D;
Border: 1px solid # E87F16;
Font-size: 1px;
Min-height: 8px;
Max-height: 10px;
Height: 10px;
Left:-1px;
Position: absolute;
Top:-1px;
}
</Style>
</Head>
<Body id = 'A'>
<Div id = "prg">
<Span class = "txt"> normal </span>
<Div style = "width: 100px;" class = "load" onmousemove = "xPrg (this, event)"> <span style = "width: 50%; "id =" p "> </span> </div>
<Span class = 'num'> 4324323 </span>
</Div>
<Script type = 'text/javascript '>
Function xPrg (I, e ){
Var I = $ (I );
Var p = I. getElementById ('P ');
If (! I |! P) {return false ;}
I. setStyle ('cursor ', 'pointer ');
I. onclick = function (){
Alert ('What do I do? ');
}
Var ex = e. clientX; // The current mouse position
Var s = p. getPosition (). x. toInt (); // The original x offset.
Var bw = I. getStyle ('width'). toInt (); // The width of the progress bar box (px)
Var nw = ex-s; nw = (nw> bw )? Bw: nw; nw = (nw <1 )? 0: nw; // The width of the mouse position
P. setStyle ('width', nw + 'px ');
Var x = bw/5;
If (nw> 0 & nw <= x ){
Parameters ('prg').getelement('.txt '). set ('text', 'Very bad ');
} Else if (nw> x & nw <= (x * 2 )){
Condition ('prg').getelement('.txt '). set ('text', 'bad ');
} Else if (nw> x & nw <= (x * 3 )){
Parameters ('prg').getelement('.txt '). set ('text', 'normal ');
} Else if (nw> x & nw <= (x * 4 )){
Parameters ('prg').getelement('.txt '). set ('text', 'good ');
} Else if (nw> x & nw <= (x * 5 )){
Parameters ('prg').getelement('.txt '). set ('text', 'excellent ');
}
}
</Script>