[Jquery] 实现温度计动画效果

 

设计图如下:

1.xhml

 

  
    

   
     
   
     <
   
     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
   
     =
   
     "
   
     请输入0-100的数值
   
     "
   
      id
   
     =
   
     "
   
     num
   
     "
   
     />
   
     
 
   
     <
   
     input name
   
     =
   
     ""
   
      type
   
     =
   
     "
   
     button
   
     "
   
      id
   
     =
   
     "
   
     Risk
   
     "
   
      value
   
     =
   
     "
   
     查看度数
   
     "
   
      
   
     />
  
    

 

 

2.css

  
    

   
     
   
     #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

 

  
    

   
     
   
     $(document).ready(function(){
$(
   
     "
   
     #hot
   
     "
   
     ).fadeTo(
   
     0
   
     ,
   
     0
   
     );
   
     //
   
     初始透明度为0；
   
     

   
     $(
   
     '
   
     #num
   
     '
   
     ).click(function(){
   
     this
   
     .select();})
$(
   
     '
   
     #Risk
   
     '
   
     ).click(function(){
 inputvalue
   
     =
   
     $(
   
     '
   
     #num
   
     '
   
     ).val();
   
     //
   
     val()获取input元素的值，另外还可以用attr("value")来获取；
   
     

   
      var inputnum
   
     =
   
     parseInt(inputvalue);
 
   
     if
   
     ($(
   
     '
   
     #num
   
     '
   
     ).val().search(
   
     "
   
     ^-?\\d+$
   
     "
   
     ) 
   
     !=
   
      
   
     0
   
     ){
 alert(
   
     "
   
     请输入一个0-100的整数!
   
     "
   
     );
 
   
     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(
   
     '
   
     slow
   
     '
   
     ,Columnhe);

   
     //
   
     在这里把html换成text效果也是一样的;
   
     

   
     });
});
  
    

 将代码一一拷贝到页面相应的位置，然后记得调用jquery框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！