JavaScriptでシンプルなスクロールウィンドウを実装する
|
この記事では、スクロールウィンドウを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 1. 実施効果図
2. 関連する知識ポイントwindow.open() メソッドは、新しいブラウザ ウィンドウを開いたり、名前付きウィンドウを検索したりするために使用されます。 moveTo(): このメソッドは、ウィンドウの左上隅を指定された座標に移動できます。 window.screen.height: 画面のピクセル高さ window.screen.width: 画面の幅（ピクセル単位） window.screenLeft; 画面の左側からの距離 window.screenTop; 画面上部から画面までの距離 setTimeout: このメソッドは、指定されたミリ秒数 (setTimeout(function, milliseconds)) 後に関数を呼び出したり、式を計算したりするために使用されます。 3. コードの実装
<!DOCTYPE html>
<html lang="utf-8">
<ヘッド>
<メタ文字セット="UTF-8">
<title>スクロールウィンドウ</title>
<スクリプト>
var w;//ページの幅 var h;//ページの高さ var x;//画面からの水平距離 var y;//画面からの垂直距離 var v = 5;//各動きの水平位置 var s = 8;//各動きの垂直位置 function windowOpen(){
mywindow = window.open('','','幅=200px,高さ=100px');
mywindow.document.write("これは開いているウィンドウです");
w =ウィンドウの画面幅;
h=ウィンドウの画面の高さ;
ウィンドウの画面左端にxを置きます。
y = ウィンドウの画面上部;
ウィンドウ移動();
}
関数windowmove(){
x<0||x>wの場合{
s=-s;
}
x = x + s;
y<0||y>hの場合{
v=-v;
}
y = y + v;
mywindow.moveTo(x,y);
setTimeout(ウィンドウ移動、10);
}
</スクリプト>
</head>
<本文>
<input type="submit" value="ウィンドウを開く" id="windowOpen" onclick="windowOpen()">
</本文>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で PHP を 5.6 にアップグレードする実用的な方法
>>: MySQLストレージ時間タイプの選択に関する問題の説明
推薦する
Vue はチャット ボックスで絵文字を送信する機能を実装します
vueチャットボックスで絵文字を送信し、vueインターフェースで絵文字を送信するための具体的なコード...
Linuxカーネルの浮動小数点演算のサポートに関する簡単な説明
現在、ほとんどの CPU は浮動小数点ユニット (FPU) をサポートしています。FPU は、プロセ...
テキストエリアのテキスト入力領域に改行を実装する方法
textarea 入力領域でテキストを折り返す場合は、<br/> と入力すると <...
JavaScript における 3 つの for ループ ステートメントの使用の概要 (for、for...in、for...of)
序文JS に触れるすべての開発者は、必然的に for ループを扱うことになります。結局のところ、fo...
Chromeブラウザの自動パスワード保存プロンプト機能を無効にする方法
注: Web 開発では、フォームに autocomplete="off" を追加...
CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード
1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...
CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります
Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...
dockerでlnmp環境を構築する方法
プロジェクトディレクトリを作成する php ディレクトリをコピーする次のプロジェクト構造を作成します...
React コンポーネント通信ルーティングパラメータ転送 (react-router-dom)
目次最近Reactを勉強していて、今は仕事でVueを使っています。学習の過程で、両者を比較して理解を...
Tomcatを自動的に開始するサービスとして設定するにはどうすればいいでしょうか？最も簡単な方法
Tomcat が自動的にサービスを開始するように設定します。最近、問題が発生しました。サーバー上のプ...
dl、dt、dd リスト ラベルの例
dd タグと dt タグはリストに使用されます。通常は <ul><li> タ...
Vue の基本入門: Vuex のインストールと使用
目次1. vuexとは何か2. インストールと導入3. vuexの使用4. プロセスの紹介5. 突然...
MySQL インデックスクエリ最適化スキルを習得するための記事
序文この記事では、DBA がいないチームが参考にできるように、MySQL の一般的な使用に関するヒン...
Mysql の mysql.user ユーザー テーブルの詳細な説明
MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...
Nginx プロセス スケジューリングの問題の詳細な説明
Nginx は、マスター プロセス (MasterProcess) と、同じ数のホスト CPU コア...