コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

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

WBOY
リリース： 2016-05-16 18:24:55
オリジナル
1424 人が閲覧しました

設計図は次のとおりです。
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 フレームワークには表示条件が限られているため、効果は設計図とは異なりますが、実装の原則は同じです。皆さん、ようこそ。コミュニケーションするために！
関連ラベル：
アニメーション 温度計
ソース：php.cn
前の記事：jqueryの複数行スクロールコード（詳細説明付き）_jquery 次の記事：文字をUTF-8文字に変換するjsツール_javascriptスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Axios と Node.js を使用して PokeAPI から特定の統計 (Stats) を取得する際に問題が発生する 問題があり、PokemonAPI を使用しようとしていますが、攻撃、HP、および速度の統計にアクセスしようとすると、すべてのポケモンに対して未定義と表示されます。 API呼び出しの...
から 2024-04-06 18:46:35
0
1
464
apply からのメソッドを使用する 配列の最大値を見つける簡単な方法は Math.max.apply(null,myArray) です。 ただし、myArray に複素数が含まれており、各複素数が複素数の長さを計算す...
から 2024-04-03 21:41:46
0
2
278
Angular で円形の SVG 温度ドラッガーを作成しますか? これは、Angular で作成しようとしている円形の親指ドラッガーの静的なデモンストレーションです。これは、rinkle-dashoffset="-260" 設...
から 2024-04-03 09:33:29
0
1
376
異なる高さの要素の周囲に境界線を作成する 私は、react-photo-album を使用して、Web サイトにフォト アルバムを作成しています。下部の写真の周囲に CSS 境界線を設定できるかどうか疑問に思っていますが、...
から 2024-03-30 10:28:37
0
1
331
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート