基于Jquery的溫度計動畫效果
更新時間：2010年06月18日 23:57:10 作者：
將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計圖有出入，但實現(xiàn)原理是一樣的，歡迎大家多多交流！
設(shè)計圖如下:
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的數(shù)值" id="num"/>
<input name="" type="button" id="Risk" value="查看度數(shù)" />
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的整數(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效果也是一樣的;
});
});
將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計圖有出入，但實現(xiàn)原理是一樣的，歡迎大家多多交流！
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效果也是一樣的;
});
});
將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計圖有出入，但實現(xiàn)原理是一樣的，歡迎大家多多交流！
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家?guī)硪黄猨query遍歷標(biāo)簽中自定義的屬性方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章運用實例介紹了jQuery的無new構(gòu)建，小編感覺介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧。2016-08-08
這篇文章主要介紹了jquery懸浮提示框?qū)崿F(xiàn)方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2016-01-01
為了提高加載速度，有個想法就是推遲外部JS加載，有興趣的朋友可以參考下，接下來詳細介紹實現(xiàn)方法2013-01-01
本文就是要利用cookie插件，獲取用戶瀏覽文章歷史記錄，并將用戶最近瀏覽歷史記錄顯示在頁面，感興趣的小伙伴們可以參考一下2016-04-04
今天小編就為大家分享一篇jquery判斷滾動條距離頂部的距離方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
將表單序列化為一個對象的方法有很多，在本文為大家介紹下使用jquery是如何做到的，感興趣的朋友可以參考下2014-01-01
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件。接下來通過本文給大家介紹jQuery Easyui實現(xiàn)左右布局，涉及到到easyui左右布局相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
通過Jquery.cookie.js實現(xiàn)展示瀏覽網(wǎng)頁的歷史記錄超管用
本文給大家分享利用cookie插件獲取用戶瀏覽文章或者是網(wǎng)頁的歷史記錄，并把用戶最近瀏覽過的信息顯示在頁面，涉及到 jquery.cookie.js相關(guān)知識，感興趣的朋友可以參考下2015-10-10
這篇文章主要介紹了jQuery下拉菜單的實現(xiàn)代碼的相關(guān)資料,非常不錯具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11