星のきらめき効果を実現するネイティブ 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 を自動シャットダウンする方法
推薦する
Linux ログ内のキーワードとその前後の情報を検索する方法の例
日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...
docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...
MySQLカスタム関数とストアドプロシージャの詳細な説明
序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...
MySQLトランザクションの特徴と分離レベルについてお話ししましょう
インターネットにはすでにこの種の記事が溢れていますが、私がこれをまだ書いている理由は単純です。それは...
mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法
目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...
CSS の複雑なセレクターと CSS のフォントスタイルと色属性の詳細な説明
これまでに CSS の基本的なセレクターをいくつか学習しましたが、今日は CSS の複雑なセレクター...
CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装
フレックスレイアウト定義: Flexレイアウトの要素は、 Flex 、または略して「コンテナー」と呼...
Nginx の負荷分散と動的および静的分離の原理と構成
目次1. Nginxは負荷分散の原則を実装する2. Nginxの動的および静的分離の原則Nginx ...
Vuexはシンプルなショッピングカートを実装します
この記事では、参考までに、Vuex の具体的なコードを共有して、簡単なショッピングカートを実装します...
CentOS7にMySQL 8.0.26をインストールする手順
1. まず、お使いのマシンに応じて、MySQL 公式サイトから対応するデータベースをダウンロードしま...
ウェブテーブルフレームを作成するためのヒント
<br />Web テーブル フレームを作成するためのヒント。 ------------...
Python スクリプトを Ubuntu で直接実行する方法
翻訳プログラムを例に挙げてみます。前回はWindowsでのアプリケーションのパッケージ化についてお話...
Alpine イメージに Ansible サービスを追加する方法
apk add ansible を使用して、alpine イメージに ansible サービスを追加...
タブ効果を実現する js 開発プラグイン
この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...
JS ES の新機能: 拡張演算子の紹介
1. スプレッド演算子スプレッド演算子は 3 つのドット ... で、複数の引数 (関数呼び出しなど...