星のきらめき効果を実現するネイティブ 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 の MySQL 時間とシステム時間の不一致の問題を解決する
最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...
Docker を使用した RabbitMQ 環境のデプロイの詳細な紹介
前提条件: Dockerはすでにインストールされています1. 画像を見つける（方法は2つあります） ...
Ubuntuで顔認識ログインを実装するための完全な手順
1. Howdyをインストール: howdyプロジェクトアドレス sudo add-apt-repo...
Windows 10 で Ubuntu 20.04 LTS をアップデートする方法
2020 年 4 月 23 日、本日、Windows 上の Ubuntu 20.04 では、Ubun...
CSS変換ページめくりアニメーションレコードの実装
ページめくりの問題のシナリオBとCは同じページ（表と裏）にありますページをめくって A をカバーした...
WindowsでcmdからDOSウィンドウに入り、MySQLデータベースにアクセスします。
1. win + R を押して cmd と入力し、DOS ウィンドウに入ります。 2. MySQL...
JavaScript の onblur および onfocus イベントの詳細な説明
HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...
HTML およびプラグイン アプリケーションにおけるデータ カスタム属性の使用の概要
HTML にはデータ属性が含まれていることがよくあります。これらは HTML5 のカスタム属性です。...
MySQL の遅いクエリを見つける方法
序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...
Vueベースのカスタムコンポーネントを実装してアイコンを導入する
序文プロジェクト開発では、アイコンを使用する方法はたくさんあります。iconfont で適切なアイコ...
JavaScriptでポインターの位置を取得する方法を教えます
JavaScript でポインターの位置を取得する方法は、イベント オブジェクトの pageX と ...
Linux で TCP 接続の最大数をテストする方法
序文TCP サーバの最大同時接続数に関して、「ポート番号の上限が 65535 であるため、TCP サ...
シンプルなドラッグ効果を実現するjs
この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...
Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...
vscode で webpack 命令を使用すると「このシステムではスクリプトの実行が禁止されているため」と表示される問題について (完璧な解決策)
Vue を学習する際に、vscode ターミナルで常に webpack 命令を使用すると、次のよう...