基于Jquery的溫度計動畫效果

更新時間：2010年06月18日 23:57:10 作者：

將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計圖有出入，但實現(xiàn)原理是一樣的，歡迎大家多多交流！

設(shè)計圖如下:

1.xhml

復(fù)制代碼代碼如下:

 
<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的數(shù)值" id="num"/> 
<input name="" type="button" id="Risk" value="查看度數(shù)" /> 

2.css

復(fù)制代碼代碼如下:

 
#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

復(fù)制代碼代碼如下:

 
$(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的整數(shù)!"); 
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效果也是一樣的; 
}); 
}); 