Jquery-based thermometer animation effect

The design diagram is as follows:

1. xhml
CopyCode The Code is as follows: <Div id = "mometer">
<Div id = "hot"> </div>
<Span>
<Div id = "hgheader"> 0 ℃ </div>
<Div id = "Hg"> </div>
</Span>
</Div>
<Input name = "AA" type = "text" value = "enter a value ranging from 0 to" id = "num"/>
<Input name = "" type = "button" id = "risk" value = "view level"/>

2. CSS
Copy codeThe Code is as follows: # num {color: #999 ;}
# Mometer {position: relative; Height: 100px; width: 15px; Background-color: # CCC; margin: 50px ;}
SPAN {position: absolute; display: block; bottom: 0px; width: 40px ;}
# Hgheader {Height: 15px; line-Height: 15px; color: # ff0000; font-size: 14px; font-family: Arial, Helvetica, sans-serif;
Border-bottom: # f00 1px solid; left:-40px; position: relative ;}
# Hg {Height: 0px; font-size: 0px; Background-color: # c00; width: 15px ;}
# Hot {Height: 100px; width: 15px; Background-color: # ff0; position: absolute; top: 0; left: 0 ;}

3. js

Copy code The Code is as follows: $ (document). Ready (function (){
$ ("# Hot"). fadeto (0, 0); // The initial transparency is 0;
$ ('# Num'). Click (function () {This. Select ();})
$ ('# Risk'). Click (function (){
Inputvalue = $ ('# num'). Val (); // Val () obtains the value of the input element. In addition, it can be obtained using ATTR ("value;
VaR inputnum = parseint (inputvalue );
If ($ ('# num'). Val (). Search ("^ -? \ D + $ ")! = 0 ){
Alert ("enter an integer between 0 and! ");
Return false;
} Else {
$ ("# Hgheader" ).html (inputvalue + "℃ ");
If (inputnum> = 100 ){
Inputnum= 100;
$ ('# Num'). Val (100)
$ ("# Hgheader" ).html (100 + "℃ ");
} Else if (inputnum <= 0 ){
Inputnum = 0;
$ ('# Num'). Val (0)
$ ("# Hgheader" ).html (0 + "℃ ");
}
}
VaR columnhe = inputnum/100;
$ ("# Hg"). animate ({Height: inputnum}, 'show ');
$ ("# Hot"). fadeto ('low', columnhe );
// Here, the effect of changing HTML to text is the same;
});
});

Copy the code one by one to the corresponding location on the page, and then remember to call the jquery framework. The display conditions are limited, so the effect is different from the design drawing, but the implementation principle is the same. You are welcome to talk more!