基于Jquery的温度计动画效果

设计图如下:

xhml

复制代码 代码如下:

<div id=mometer>

<div id=hot></div>

<span>

<div id=Hgheader>℃</div>

<div id=Hg></div>

</span>

</div>

<input name=aa type=text value=请输入的数值 id=num/>

<input name= type=button id=Risk value=查看度数 />

css

复制代码 代码如下:

#num{color:#;}

#mometer{position:relative; height:px;width:px;backgroundcolor:#CCC;margin:px;}

span{position:absolute;display:block;bottom:px;width:px;}

#Hgheader{height:px;lineheight:px;color:#FF;fontsize:px;fontfamily:Arial Helvetica sansserif;

borderbottom:#f px solid;left:px;position:relative;}

#Hg{height:px; fontsize:px;backgroundcolor:#C;width:px;}

#hot{height:px;width:px; backgroundcolor:#FF; position:absolute; top:; left:;}

js

复制代码 代码如下:

$(document)ready(function(){

$(#hot)fadeTo();//初始透明度为

$(#num)click(function(){thisselect();})

$(#Risk)click(function(){

inputvalue=$(#num)val();//val()获取input元素的值另外还可以用attr(value)来获取

var inputnum=parseInt(inputvalue);

if($(#num)val()search(^?\\d+$) != ){

alert(请输入一个的整数!);

return false;

}else{

$(#Hgheaderl(inputvalue+℃);

if(inputnum>=){

inputnum=;

$(#num)val()

$(#Hgheaderl(+℃);

}else if(inputnum<=){

inputnum=;

$(#num)val()

$(#Hgheaderl(+℃);

}

}

var Columnhe=inputnum/;

$(#Hg)animate({height:inputnum}show);

$(#hot)fadeTo(slowColumnhe);

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

});

});

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