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ストレージ時間タイプの選択に関する問題の説明
推薦する
Docker が MySQL イメージをプルするのが遅すぎる問題を解決する
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
CSSはメッセージパネルをスライドするWebコンポーネント機能を実装します
みなさんこんにちは。私と同じように混乱している方はいらっしゃいませんか。CSS は簡単に始められます...
CocosCreator スケルトンアニメーション ドラゴンボーン
CocosCreator バージョン 2.3.4ドラゴンボーンアニメーションキールアニメーションを ...
HTML tbody の使用
構造化テーブル (IExplore のみ) 1) 行ごとにグループ化<thead> .....
よく使用される MySQL 関数の完全なリスト (分類および要約)
1. 数学関数ABS(x) xの絶対値を返します。 BIN(x) xの2進値を返します（OCTは8...
ポップアップはすべて不正なものではありません。ウェブサイトのポップアップをデザインするためのヒント
ポップアップニュースは国内のインターネットサービスでは一般的であり、リアルタイムプッシュ方式はウェブ...
MYSQL8.0.13 無料インストール版 設定チュートリアル例 詳細説明
1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...
Docker で MySQL をインストールし、リモート接続を実装するチュートリアル
画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...
2列のデータをSQLの新しい列として操作する
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
CSS最適化スキルの自己実践体験
1. CSS スプライトを使用します。利点は、CSS で使用される小さな画像を 1 つの大きな画像に...
Linux lseek関数の使い方の詳しい説明
注：記事に誤りがある場合は、メッセージを残して指摘してください。ご協力ありがとうございます。名前名前...
vue3+ts+EsLint+Prettier 標準コード実装
目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...
VUE無限レベルツリーデータ構造表示の実装
目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...
Tcl言語に基づくシンプルなネットワーク環境を構成するプロセスの分析
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
Vue3 における provide と inject の使用法と原則
序文：親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...