亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

基于Jquery的溫度計(jì)動(dòng)畫效果

 更新時(shí)間：2010年06月18日 23:57:10   作者：  
將代碼一一拷貝到頁面相應(yīng)的位置，然后記得調(diào)用jquery框架，展示條件有限，所以效果跟設(shè)計(jì)圖有出入，但實(shí)現(xiàn)原理是一樣的，歡迎大家多多交流！
設(shè)計(jì)圖如下:

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="請(qǐng)輸入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("請(qǐng)輸入一個(gè)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è)計(jì)圖有出入，但實(shí)現(xiàn)原理是一樣的，歡迎大家多多交流！

相關(guān)文章

最新評(píng)論