Jquery-based thermometer animation effect _ jquery

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! The design diagram is as follows:

1. xhml

The Code is as follows:

0 ℃

2. css

The 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

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!