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の日付文字列タイムスタンプ変換の詳細な説明
時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...
jsはショッピングカートの加算と減算、価格計算を実装します
この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...
Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装
目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...
Vueはローカルストレージの追加、削除、変更機能を実装します
この記事では、ローカルストレージの追加、削除、変更を実装するためのVueの具体的なコードを例として紹...
JavaScript の BigIn 関数の共通プロパティをまとめます
目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...
MySQL ルートパスワードエラー番号 1045 の解決方法
MySQLサービスを停止するWindowsでは、マイコンピュータを右クリック--管理--サービスと...
MySQL のグループ分けの例
mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...
CSS ロリポップを描くサンプルコード
背景: 毎日少しずつ進歩し、少しずつ積み重ねていけば、どんどん良くなっていきますコード： <!...
MySQLクエリの文字セットの不一致の問題を解決する方法
問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...
Web ページ WB.ExecWB 制御印刷メソッド呼び出しの説明とパラメータの紹介
WebページWB.ExecWB制御印刷方法コードをコピーコードは次のとおりです。 <テーブルの...
HTML 左、中央、右の適応レイアウト (calc css 式を使用)
最新の HTML 標準には、レイアウトを計算するために使用できる calc CSS 式があります。し...
Linux の fsevents モジュールによって発生する npm ls エラーの解決方法の詳細な説明
Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...
Nginxの書き換えモジュールの詳細な説明
書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...
docker システムコマンドセットの使用
目次docker システム df docker システム プルーンdocker systemc 情報...
WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...