星のきらめき効果を実現するネイティブ 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 を自動シャットダウンする方法
推薦する
Dockerはmacvlanをベースにホスト間コンテナ通信を実装する
2 台のテスト マシンを見つけます。 [root@docker1 centos_zabbix]# d...
jQueryは従業員情報の追加と削除の機能を実装します
この記事では、従業員情報の追加と削除の機能を実装するためのjQueryの具体的なコードを参考までに共...
テーブルパーティションとパーティション分割とは何ですか?MySqlデータベースパーティションとテーブルパーティション分割方法
1. テーブルとパーティションを分割する必要があるのはなぜですか?日常の開発では、大きなテーブルに遭...
Vue フィルターの使用とタイムスタンプ変換の問題
目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...
PC/Pad/Phoneデバイスに自動的に適応するCSSウェブページレスポンシブレイアウト
序文最近は、PC、iPad、携帯電話、スマートウォッチ、スマートテレビなど、さまざまなデバイスが存在...
Vueは完全な選択機能を実装しています
この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
int(3)とint(10)の値の範囲はmysqlで同じですか？
目次質問：答え：現実：知識ポイント結論は：要約する質問： MySQLフィールド、unsigned i...
docker に基づいて nginxssl 設定を開始する
前提条件クラウドサーバー（Alibaba Cloud、Tencent CloudなどのcentOS）...
スーパーバイザーを使用して nginx + tomcat コンテナを管理する例
必要： docker を使用して nginx + tomcat デュアル プロセスを起動します。実際...
Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス
1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...
Linuxカーネルがプロセスアドレス空間に侵入し、プロセスメモリを変更する方法
プロセス アドレス空間の分離は、現代のオペレーティング システムの注目すべき機能です。これは、「古い...
Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明
ルーティングとは何ですか?ルーティングとは、相互接続されたネットワークを介して送信元ステーションから...
Dockerでリモートアクセスを有効にする方法
DockerデーモンソケットDocker デーモンは、 unix 、 tcp 、 fdの 3 種類の...
MySQL 5.7.10 インストール ドキュメント チュートリアル
1. 依存パッケージをインストールする yum -y インストール gcc-c++ ncurses-...
Ubuntu ベースのディストリビューションに Microsoft TrueType フォントをインストールするチュートリアル
Linux 上の LibreOffice で Microsoft ドキュメントを開くと、フォントが少...