[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框架，展示条件有限，所以效果跟设计图有出入，但实现原理是一样的，欢迎大家多多交流！