ホームページ >ウェブフロントエンド >jsチュートリアル >Jquery_jquery に基づく温度計アニメーション効果

Jquery_jquery に基づく温度計アニメーション効果

WBOYオリジナル: 2016-05-16 18:24:551465ブラウズ

設計図は次のとおりです。
Jquery_jquery に基づく温度計アニメーション効果
1.xhml

コードをコピーコードは次のとおりです。

/div>

name="" type=" button" id="リスク" value="表示度" />

2.css

コードをコピーしますコードは次のとおりです: #num{color:#999;}

#mometer{位置:相対;高さ:100px;幅:15px;背景色:#CCC;マージン:50px;}

スパン{位置:絶対;表示:ブロック;下:0px;幅: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;位置:相対;} 
 #Hg{高さ:0px;フォントサイズ:0px;背景色:#C00;幅:15px;} 
#hot{高さ:100px;幅:15px; -color:#FF0; 位置:絶対; 上:0; 左:0;} 

 

3.js

コードをコピー

コードは次のとおりです: $(document).ready(function(){ $("#hot ").fadeTo(0,0);//初期透明度は 0;

$('#num').click(function(){this.select();})

$('#Risk ').click(function(){ 
inputvalue =$('#num').val();//val() は入力要素の値を取得します。また、attr("value") を使用することもできます取得するには; 
var inputnum=parseInt(inputvalue); 
if($('#num').val().search("^-?\d $"){ 
alert("0 から 100 までの整数を入力してください!"); 
return false; 
$("#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 をテキストに置き換えても同じです。
}); 
コードをページ上の対応する場所に 1 つずつコピーし、忘れずに呼び出してください。jquery フレームワークには表示条件が限られているため、効果は設計図とは異なりますが、実装の原則は同じです。皆さん、ようこそ。コミュニケーションするために！

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryの複数行スクロールコード（詳細説明付き）_jquery次の記事：jqueryの複数行スクロールコード（詳細説明付き）_jquery

続きを見る

Jquery_jquery に基づく温度計アニメーション効果

関連記事