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ストレージ時間タイプの選択に関する問題の説明
![MySQL でトリガーを無効化および有効化するチュートリアル [推奨]](/upload/images/67cae57d7ee69.webp)
推薦する
Vue ルーター vue-router 詳細説明ガイド
中国語ドキュメント: https://router.vuejs.org/zh/ Vue Router...
mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...
JS でオブジェクト プロパティを簡単にトラバースするいくつかの方法
目次1. 自己列挙可能なプロパティ2. Object.values()はプロパティ値を返します3. ...
HTML テキストフォーマットの簡単な例 (詳細な説明)
1. テキストの書式設定: この例では、HTML ファイル内のテキストを書式設定する方法を示します...
セマンティック HTML 構造の利点は何ですか?
1つ： 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...
TomcatはNginxリバースプロキシのクライアントドメイン名を取得します
質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...
MySQLシリーズ15 MySQL共通設定とパフォーマンスストレステスト
1. 一般的なMySQLの設定以下のすべての構成パラメータは、32G のメモリを搭載したサーバーに基...
オンデマンドで Vue コンポーネントを自動的にインポートする方法
目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...
nginx を使用して http を https に変換するサンプルコード
最近、小さなプログラムを書いています。その小さなプログラムの公式ウェブサイトはhttpsを使用する必...
Vueプロジェクトのパッケージ化の詳細な説明
目次1. 関連構成ケース1（使用ツールはvue-cil）ケース2（使用するツールはwebpack） ...
CSS カウンターとコンテンツの概要
コンテンツ プロパティは CSS 2.1 で導入され、:before および :after 疑似要素...
MySQLのDATE_ADDとADDDATE関数は、指定された時間間隔を日付に追加します。
MySQL DATE_ADD(date,INTERVAL expr type) 関数と ADDDA...
MySQL を使用した分散ロックの実装
導入分散システムでは、分散ロックは最も基本的なツール クラスです。たとえば、支払い機能を備えた 2 ...
Vueはアンカー配置機能を実装します
この記事では、アンカー配置を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は...
Linux コマンドラインからファイルを削除する実用的な方法
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...