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ストレージ時間タイプの選択に関する問題の説明
推薦する
Nginx の動的および静的分離実装ケースのコード分析
静的と動的の分離動的リクエストと静的リクエストはミドルウェアを通じて分離され、不要なリクエストの消費...
ブラウザ内でHTMLタグを中央に配置するCSSスタイル
CSS スタイル:コードをコピーコードは次のとおりです。 <スタイル タイプ="te...
mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)
mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...
CSS の優先順位に関する詳細な紹介
CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...
Linux コマンドラインからファイルを削除する実用的な方法
rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...
Docker での Tomcat インストールの 404 問題の解決方法
tomcat の containerID を見つけて、tomacat ディレクトリに入ります。 [r...
Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル
1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...
Zabbix カスタム監視 nginx ステータス実装プロセス
目次Zabbix カスタム監視 nginx ステータス1. ステータスインターフェースを開く2. 監...
ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。
序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...
Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介
1. フィルター例： <!DOCTYPE html> <html lang=&qu...
略語マークと頭字語マーク
<abbr>タグと<acronym>タグは、Web ページに表示される略語と...
CSS3 3Dクールキューブ変形アニメーションの実装
私はコーディングが大好きです。コーディングすると幸せになります!みなさんこんにちは、Counterで...
Linux rpm および yum コマンドとその使用法の詳細な説明
RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...
CSSアニメーション属性キーフレームの詳細な説明
コラムを更新してからどれくらい経ったでしょうか?半年ですか？今年の後半は、まさに離陸、つまり文字通り...
IIS 7.5では、HTMLはSHTMLのようなinclude関数（モジュールマッピングの追加）をサポートします。
最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...