jsで四角い色が下から上に上がる効果を実現_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jsで四角い色が下から上に上がる効果を実現_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

四角色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
  interid=setInterval(Showgao,1);
  var i=1;
  $('#top').height(8);
  $('#buttom').css('marginTop',42);
  $('#buttom').css('background','#d6d6d6');
  function Showgao()
  {
    var oldH=$('#buttom').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom').css('marginTop',h-1);
    $('#buttom').height(i);
    i++;
    if(i==42){clearInterval(interid);}
  }
  
  interid1=setInterval(Showgao1,1);
  var i1=1;
  $('#top1').height(4);
  $('#buttom1').css('marginTop',46);
  $('#buttom1').css('background','red');
  function Showgao1()
  {
    var oldH=$('#buttom1').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom1').css('marginTop',h-1);
    $('#buttom1').height(i1);
    i1++;
    if(i1==30){clearInterval(interid1);}
  }
});
</script>
<body>
<style>
  .container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;}
</style>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top">82%</div>
   <div id="buttom"></div>
</div>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top1" >62%</div>
   <div id="buttom1"></div>
</div>
</body>
</html>

ログイン後にコピー

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7621

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

Related knowledge

Windows 11でタイトルバーの色を変更するにはどうすればよいですか? Sep 14, 2023 pm 03:33 PM

デフォルトでは、Windows 11 のタイトルバーの色は、選択したダーク/ライトテーマによって異なります。ただし、任意の色に変更できます。このガイドでは、デスクトップエクスペリエンスを変更し、視覚的に魅力的なものにするためにカスタマイズする 3 つの方法について、段階的な手順を説明します。アクティブなウィンドウと非アクティブなウィンドウのタイトルバーの色を変更することはできますか?はい、設定アプリを使用してアクティブなウィンドウのタイトルバーの色を変更したり、レジストリエディターを使用して非アクティブなウィンドウのタイトルバーの色を変更したりできます。これらの手順を学習するには、次のセクションに進んでください。 Windows 11でタイトルバーの色を変更するにはどうすればよいですか? 1. 設定アプリを使用して + を押して設定ウィンドウを開きます。 Windows「個人用設定」に進み、

Windows 11で色を反転する方法【ショートカットを使う】 Apr 14, 2023 pm 02:43 PM

Windows コンピュータを使用している場合、コンピュータの色を反転する必要がある場合があります。これは、個人的な好みまたはディスプレイドライバーのエラーが原因である可能性があります。 Windows 11 PC の色を反転したい場合、この記事では、Windows PC の色を反転するために必要なすべての手順を説明します。この記事で画像の色を反転するとはどういう意味ですか?簡単に言えば、画像の色を反転するとは、画像の現在の色をカラーホイール上の反対の色相に反転することを意味します。これは、画像の色をネガに変えることを意味するとも言えます。たとえば、青い画像はオレンジに、黒から白、緑からマゼンタなどに反転されます。 Windows 11 で色を反転するにはどうすればよいですか? 1. Microsoft ペイントボタン + を使用して、次のように入力します。

天然チタン：iPhone 15 Proの本当の色を明らかにする Sep 18, 2023 pm 02:13 PM

毎年恒例のワンダーラストイベントが終了し、AppleはiPhone 15のラインナップに関する数か月にわたる噂や憶測についに終止符を打った。予想通り、2023 年のフラッグシップ「プロ」モデルは、生のパワーと新しい「チタン」デザインと美しさの点で他と一線を画しています。ここでは、新しいiPhone 15 Proモデルのさまざまな色を見て、「天然チタン」バリエーションの実際の色と色合いを確認します。 Apple iPhone 15 Pro カラー Apple は、最新の iPhone 15 Pro モデルの材料設計としてグレード 5 チタン合金を選択しました。 iPhone 15 Pro に使用されているチタン合金は、強度と重量の比率が優れていることで知られており、耐久性と軽量性を高めるだけでなく、デバイスにエレガントな「ブラシ」のような質感を与えます。

win10 コンピューターで目の保護カラーアプリケーションを設定する方法に関する詳細なチュートリアル Jul 08, 2023 am 10:46 AM

会社員の場合、一日中パソコンを使って作業をしていると、ソフトの背景色が真っ白になることが多く、長時間見ていると目が乾いて不快感を感じてしまいます。実は、ウィンドウの保護色をカスタマイズすることができますが、オンラインで紹介されている方法は操作が面倒なので、この記事では編集者がWin10でウィンドウの保護色を調整する方法を紹介します。コンピューターの目の保護モードを設定する方法を見てみましょう。 1. まず、キーボードの [win] + [R] キーの組み合わせを押して実行ウィンドウを開き、[regedit] と入力して [OK] をクリックして開きます。 2. 次に、レジストリフォルダーを [\HKEY_CURRENT_USER\ControlPanel\Colors] の順に展開します。 3. 次に、Colors フォルダー内を展開します。

Windows 10のタスクバーの色を変更する方法 Jan 01, 2024 pm 09:05 PM

Windows 10 でタスクバーの色を変更するのは非常に簡単ですが、多くのユーザーは設定できないことに気づきました。実際、それは非常に簡単です。コンピューターの個人用設定で好みの色を選択するだけです。色を変更できない場合は、細かい設定にも注目してください。 Win10 タスクバーの色を変更する方法ステップ 1: デスクトップを右クリックし、[個人設定] をクリックします。ステップ 2: カラー領域をカスタマイズします。ステップ 3: 好きな色を選択します。 PS: 色を変更できない場合は、[色] -> [色] をクリックします。 [色] -> [カスタマイズ] -> [デフォルトのウィンドウモード] を選択し、暗い色を選択します。

Vivo の新しい X100 シリーズメモリ、カラー露出: すべてのシリーズは 12+256GB から始まります May 06, 2024 pm 03:58 PM

5月6日のニュースによると、vivoは本日、新しいvivoX100シリーズが5月13日19時に正式にリリースされると正式に発表しました。このカンファレンスでは、vivoX100s、vivoX100sPro、vivoX100Ultraの3モデルと、vivoの自社開発イメージングブランドBlueImageブループリントイメージング技術が発表される予定であることがわかった。デジタルブロガー「Digital Chat Station」も本日、これら3モデルの公式レンダリング、メモリ仕様、カラーマッチングを公開しており、このうちX100sはストレートスクリーンデザインを採用しているのに対し、X100sProとX100Ultraは曲面スクリーンデザインを採用している。ブロガーは、vivoX100s にはブラック、チタン、シアン、ホワイトの 4 つの色があることを明らかにしました。メモリの仕様。

WPSドキュメントテーブルの色の設定方法をご存知ですか？ Mar 20, 2024 am 08:19 AM

他の人の WPS ドキュメントのテーブルカラーを見ると、効果はカラフルで美しいですが、私たちは単調な黒しかありません。表を色で埋めなければならない場合、多くの学生がそうするでしょう。しかし、WPS ドキュメント China でテーブルの色を設定したい場合、多くの学生は間違いなく混乱するでしょう。今日は、WPS ドキュメントテーブルの色の設定方法を学びましょう。皆様のお役に立てればと思い、資料を作成させていただきました。手順は次のとおりです。 1. WPS ドキュメント内に表を描画し、線の色を変更する表を右クリックする必要があります。 2. 次に、表上でマウスを右クリックし、ポップアップメニューに「枠線と網かけ」が表示されます。 3. このとき、[境界線と網かけ]オプションが開きます。