星のきらめき効果を実現するネイティブ js
|
この記事の例では、星のきらめき効果を実現するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。 星が瞬く原理は実はとてもシンプルです。
HTMLコード: <body style="background:#000"> <div id="stars_box"></div> </本文> js:
var stars_box=document.getElementById('stars_box'); //id star_boxvar の要素を取得 Obj=function(){} //オブジェクトを作成 Obj.prototype.drawStar=function(){ //オブジェクトプロトタイプメソッドdrawStarを追加
var odiv = document.createElement('div'); //div を作成
スタイルの幅='7px';
スタイルの高さを '7px' に設定します。
odiv.style.position='relative'; //div を相対配置に設定します odiv.style.left=Math.floor(document.body.clientWidth*Math.random()) 'px'; //div の左の値は画面の幅を超えることはできません odiv.style.top=Math.floor(document.body.clientHeight*Math.random()) 'px'; //div の左の値は画面の高さを超えることはできません odiv.style.overflow='hidden'; //div のオーバーフローを非表示に設定します
stars_box.appendChild(odiv); // stars_box 要素に div を追加します var ostar=document.createElement('img'); // img 要素を作成します ostar.style.width='49px';
ostar.style.height='7px';
ostar.src='星.png';
ostar.style.position='absolute'; //img を絶対位置に設定します ostar.style.top='0px';
odiv.appendChild(ostar); //divにimgを追加 Play(ostar); //アニメーションの点滅を実装するメソッド Play();
}
関数Play(ele){
var i=Math.floor(Math.random()*7); //星が異なる時間に瞬くようにするには、ランダムな値を設定します var timer=setInterval(function(){ //100msごとに匿名メソッドを実行します if(i<7){
ele.style.left=-i*7 'px';
私 ;
}それ以外{
私=0;
}
},100);
}
// for ループを使用して 30 個の異なるオブジェクトを作成します for(var i=0;i<30;i ){
var obj = 新しい Obj();
obj.drawStar();
}きらめく星の静的効果:
最後に、星の画像を添付します。
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ホストNginx + Docker WordPress Mysqlを設定するための詳細な手順
>>: バッテリー残量が少なくなったときに Linux を自動シャットダウンする方法
推薦する
魔法のMySQLデッドロックトラブルシューティング記録
背景MySQL のデッドロックについて言えば、私は以前 MySQL のロックに関する基本的な紹介記事...
Docker で MySQL サービスをデプロイする方法と、遭遇する落とし穴
最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...
CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明
目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...
Vue ミックスインの使用方法とオプションのマージの詳細な説明
目次1. コンポーネントでの使用2. オプションのマージ要約する1. コンポーネントでの使用Mixi...
ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...
Tomcatの自動シャットダウンに関するバグ修正
序文最近、4 年間実行されている Java EE Web プロジェクトでは、システムが開けないという...
CSSアニメーションに基づくSVGボタンのサンプルコード
具体的なコードは次のとおりです。 <a href="#"> <...
Linuxはiftopを使用してネットワークカードのトラフィックをリアルタイムで監視します
Linux は iftop を使用してネットワーク カードのトラフィックをリアルタイムで監視します。...
WindowsでのNginxの起動や停止などの基本操作コマンドの詳しい説明
Windows で Nginx を使用するには、Nginx サービスの起動、停止、Nginx のリロ...
Linux システムで httpd の自動インストールと構成を Ansible で実装する方法
1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...
JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します
目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...
impress.js プレゼンテーション層フレームワーク (デモツール) - 初めての体験
半年もブログを書いていなかったので、少し恥ずかしいです... 正月休みは、Dota をプレイしたり ...
トリガーメソッドを使用して、ファイルタイプの入力をクリックせずにポップアップファイル選択ダイアログボックスを実現します。
トリガー メソッドを使用できます。JavaScript にはネイティブのトリガー関数はありません。自...
Windows Server win2003、win2008R2、win2012、win2016、win2019 システム バージョン間の違い
最近、Microsoft は 2019 サーバー システムをリリースしました。一般的に、Micros...
mySQLキーワードの実行優先度の説明
以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...